javascript - d3 六​​边形分箱域和范围

Question

我正在尝试基于此示例创建一个六边形分箱图:http://bl.ocks.org/mbostock/4248145

我已经弄清楚如何设置每个轴的域。但我在设置点时遇到了麻烦，我认为这是因为范围的原因。

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width  = 800 - margin.left - margin.right, // 740px
    height = 500 - margin.top - margin.bottom; // 450px

var points = [[1000,30],[5000,40],[8000,50]]

var x = d3.scale.linear().domain([0, 10000]).range([0, width]);
var y = d3.scale.linear().domain([18, 65]).range([height, 0]);

使用这些点，图表将显示为空白。

但是如果我尝试以下几点:

var points = [[100,30],[200,40],[300,50]]

它们出现在图表上，但距离应有的位置还差得远。例如，[100,30]，看起来应该类似于[1400,62]。

我已经读过this post about scales on d3 。但我还没弄清楚如何正确显示这些点。

JSFiddle:http://jsfiddle.net/P6KWZ/

Answer 1

你的jsfiddle中有两件事。首先，您实际上并没有使用您创建的比例来定位六边形。其次，您根据原始值计算域并绘制由 hexbin 计算的值。

因此，首先根据分箱值计算域:

var projectedPoints = hexbin(points);

var x = d3.scale.linear()
    .domain(d3.extent(projectedPoints, function(d) { return d.x; }))
    .range([0, width]);

var y = d3.scale.linear()
    .domain(d3.extent(projectedPoints, function(d) { return d.y; }))
    .range([height, 0]);

然后使用刻度平移六边形:

.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })

完整演示 here .