D3 Hexbin网格对齐

Question

I'm having problem getting the hexbin's mesh to overlap properly with the hexagons created to display data. Here is the fiddle

This was forked from Lars Karthoff, and it's just a vanilla graph with a single data point in the middle of the graph. In my fork, the only customization I made was to add the mesh.

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

If the mesh and my custom hexagons are using the same hexbin function, why aren't they aligned?

Answer 1

The problem is that you're applying your scales to the result of the binning, but not the hex grid. To align them properly, tell the hexbin layout to use the scales:

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

Then you also don't need to apply the scales again when plotting the bins -- the coordinates can be taken directly. Complete demo here .