d3.hexbin 插件 - 动态定义颜色域以适应数据

Question

我正在使用 d3.hexbin 插件 (http://bl.ocks.org/mbostock/4248145) 开发六角分格页面。

我已经设法使用数据中的最小值和最大值动态定义轴的域。

但是我想根据点变量动态生成 bin 颜色域。

示例 bin 根据以下代码着色：

var color = d3.scale.linear()
    .domain([0, 20])
    .range(["white", "steelblue"])
    .interpolate(d3.interpolateLab);

颜色范围映射到 0 到 20 之间的值。对于大型数据集，通常存在超过 20 个点的六边形 bin，并且图表“饱和”。

能否根据数据动态生成色域值[0,20]？是否可以通过某种方式从 hexbin 对象中获取分配给 bin 的最大和最小点数？

感谢您的帮助，因为我不太热衷于 JavaScript。

Answer 1

即将定义域定义为 bin 大小的均值和标准差的函数。将其翻译回原始的 Mike Bostock 示例：

创建所有 bin 大小的数组：

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 library，但您也可以轻松地滚动自己的域或将域最大值设置为 counts 中的最大值，如下所示：

color.domain([0, d3.max(counts)]);

这是一个有效的 fiddle，色域是动态计算的：http://jsfiddle.net/henbox/3jecfdfu/2/

d3.hexbin plugin - dynamically define colour domain to suit data