8

私は現在、d3.jsとd3.js用のhexbinプラグインを使用してhexグリッドを作成しようとしています。私が抱えている問題は、すべての六角形が一緒にうまくいくのではなく、常に空の六角形または空の行全体がグリッドにあることです。

これを修正する方法はありますか？

私のコード：

var margin = {
    top: 80,
    right: 20,
    bottom: 50,
    left: 80
},
width = $(window).width() - margin.left - margin.right,
height = $(window).height() - 28 - margin.top - margin.bottom;

var points = [];
for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 12; j++) {
        points.push([Math.floor(width * j / 12), Math.floor(height * i / 8)]);
    }
}

var hexbin = d3.hexbin()
    .size([width, height])
    .radius((width / 12) / 2);

var svg = d3.select($("#grid").get(0)).append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .selectAll(".hexagon")
    .data(hexbin(points))
    .enter().append("path")
    .attr("class", "hexagon")
    .attr("d", function (d) {
    return hexbin.hexagon();
})
    .attr("transform", function (d) {
    return "translate(" + d.x + "," + d.y + ")";
})
    .attr("stroke", "#fff")
    .attr("stroke-width", "2px")
    .style("fill", function (d) {
    return "#dcdcdc"; //color(d.length); 
});
4

1 に答える 1

8

ポイントデータを変更して、六角形が追加されたときに、変換によって1つの六角形が右に移動しすぎたり、1つの行が下に移動したりしないようにします。

このようなもの：

var points = [];
for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 12; j++) {
        points.push([Math.floor(width * j / 14), Math.floor(height * i / 11)]);
    }
}
于 2013-01-30T12:42:48.533 に答える