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] 。

我已經閱讀了有關d3上的標尺的文章 。 但是我還沒有弄清楚如何正確顯示這些點。

JSFiddle ： http ： //jsfiddle.net/P6KWZ/

Answer 1

您的jsfiddle中有兩件事。 首先，您實際上並沒有使用創建的刻度來放置六邊形。 其次，您要根據原始值計算域，並繪制由十六進制計算的值。

因此，首先根據合並后的值計算域：

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) + ")"; })

在此處完成演示。