为什么点接近度不同于散点图和六边形图？

Question

请看Hexbin和散点图：http://imgur.com/a/2oR68

为什么在 Hexbinplot 中，点不相互接触，而在散点图中却清楚地接触到接近的点？

我预计我的 hexbin 情节会像这样出现：https://bl.ocks.org/mbostock/4248145 但它没有。

我正在使用 d3.hexbin 插件。

除了一点点缩放之外，从 Hexbin 图到散点图（我正在处理相同的数据集）的唯一代码是：

对于Hexbin：

 var color = d3.scale.linear()
                .range(["white", "steelblue"])
                .interpolate(d3.interpolateLab);

var hexbin = d3.hexbin()
               .extent([[0,0],[size - padding , padding]])
               .radius();

hexbin.x(function(d,i){return x(subdata[0][i]);})
hexbin.y(function(d,i){return y(subdata[0][i]);})

svg.append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("class", "mesh")
    .attr("width", w)
    .attr("height", size);

svg.append("g")
    .attr("clip-path", "url(#clip)")
    .selectAll(".hexagon")
    .data(hexbin(datum))
    .enter()
    .append("path")
    .attr("class", "hexagon")
    .attr("d", hexbin.hexagon())
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .style("fill", function(d) { return color(d.length); });    

散点图：

 svg.selectAll("circle")
.data(datum)
.enter()
.append("circle")
.style("fill", "steelblue")
.attr("cx", function (d, i) {
    return x(subdata[0][i]);
})
.attr("cy", function (d,i) {
    return y(subdata[0][i]);
})
.attr("r", 3)

我哪里做错了？

Edit1：在 Hexbin 下包含部分代码

Answer 1

如果你设置...

.attr("d", hexbin.hexagon(5))
//radius value here ------^

...，只有在六边形生成器中设置相同的值时，六边形才会接触：

var hexbin = d3.hexbin()
    .radius(5)//same value here
    .extent([[0, 0], [width, height]]);

根据您的结果，我认为情况并非如此。因此，解决方案可以简单地删除该值：

.attr("d", hexbin.hexagon())
//no radius here --------^