我正在使用d3.hexbin插件开发一个六边形Binning页面(http://bl.ocks.org/mbostock/4248145)。
我已经设法使用数据中的最小值和最大值动态定义了轴的域。
然而,我想基于点变量动态生成bin颜色域。
示例箱根据以下代码着色:
var color = d3.scale.linear()
.domain([0, 20])
.range(["white", "steelblue"])
.interpolate(d3.interpolateLab);
颜色范围被映射到0到20之间的值。对于大型数据集,通常有超过20个点的六边形箱,并且图表是"饱和的"。
颜色域值[0,20]是否可以根据数据动态生成?有可能以某种方式从hexbin对象中获得分配给bin的最大和最小点数吗?
感谢你的帮助,因为我对JavaScript不太感兴趣。
我会尝试这个hexbin示例中使用的方法:http://projects.delimited.io/experiments/hexbins/starbucks.html
也就是说,将域定义为均值&料仓尺寸的标准偏差。将其翻译回最初的Mike Bostock示例:
-
创建一个所有仓位大小的数组:
var bins = hexbin(points); var counts = []; bins.map(function (elem) { counts.push(elem.length) });
-
基于
counts
阵列设置颜色域:color.domain([0, (ss.mean(counts) + (ss.standard_deviation(counts) * 3))]);
在本例中,ss是simple_statistics.js库,但您也可以轻松地滚动自己的库,或者将域最大值设置为counts
中的最高值,如下所示:
color.domain([0, d3.max(counts)]);
下面是一个动态计算颜色域的工作小提琴:http://jsfiddle.net/henbox/3jecfdfu/2/