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。

d3六边形Binning域和范围

1 个答案: