D3 六角形网格对齐

D3 Hexbin Mesh Alignment

本文关键字：对齐 网格 六角形 D3      更新时间：2023-09-26

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

这是从Lars Karthoff分叉而来的，它只是一个普通图，在图的中间有一个数据点。 在我的分叉中，我所做的唯一自定义是添加网格。

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

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

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

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

这样，在绘制条柱时也不需要再次应用比例尺 - 可以直接获取坐标。在此处完成演示。

相关文章：