D3 Hexbin Mesh Alignment

Question

我在使用六边形网格与为显示数据而创建的六边形正确重叠时遇到问题。这是fiddle

这是Lars Karthoff的分支，它只是一张图中间有一个数据点的香草图。在我的fork中，我唯一的定制是添加网格。

＆＃13;

＆＃13;

svg.append("svg:path")
            .attr("clip-path", "url(#clip)")
            .attr("d", hexbin.mesh())
            .style("stroke-width", .5)
            .style("stroke", "black")
            .style("fill", "none");

＆＃13;

＆＃13;

＆＃13;

如果网格和我的自定义六边形使用相同的hexbin函数，为什么它们不对齐？

Answer 1

问题在于您将刻度应用于分档的结果，而不是十六进制网格。要正确对齐它们，请告诉hexbin布局使用比例：

var hexbin = d3.hexbin()
  .size([width, height])
  .x(function(d) { return x(d[0]); })
  .y(function(d) { return y(d[1]); })
  .radius(8);

然后，在绘制垃圾箱时，您也不需要再次应用秤 - 可以直接进行坐标。完整演示here。