我在使hexbin的网格与创建以显示数据的六边形正确重叠方面遇到问题。这是fiddle

这是由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");





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

最佳答案

问题是您将比例尺应用到合并结果,而不是十六进制网格。要正确对齐它们,请告诉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

关于javascript - D3 Hexbin网格对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27250799/

10-10 05:04