Question

为什么在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 ------^

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

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

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

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

为什么点密切度与散点图到六边形图不同？

1 个答案: