Javascript d3 Voronoi覆盖层在铬合金上的最小距离？（Firefox作品）

我试图在图表上添加一个Voronoi叠加，但似乎当点之间的间隔小于20px时，某些路径将永远不会被选择，特别是对于起点和终点的点。感谢音乐方面的

和
，他们注意到这只发生在Chrome浏览器上

我回去玩上原来的帖子，发现了同样的问题（）

我认为这与clipPath的
r
值有关，但事实并非如此：问题仍然存在于
r
值
5
我发布了解决问题的方法，针对任何面临类似情况需要快速解决的人。我仍在寻找发生这种情况的原因

我的解决方法是手动创建覆盖区域，在这种情况下，布局逻辑相当简单

var col = 64;
var cr = 3;
var rwidth = (w / col);

var offset = (rwidth / 2);

// overlay: a rect that is placed around the circle space
svg.selectAll("blank")
    .data(d3.range(nbr))
    .enter()
    .append("rect")
    .attr({
        "x": function(d,i){ return (i % col) * (rwidth) - offset; },
        "y": function(d,i){ return (Math.floor(i / col) + 1) * (rwidth) - offset; },
        "width": rwidth,
        "height": rwidth,
        "fill": "white"
    })
    .on("mousemove", function(d, i){
        // do what you want to do when overlay is triggered
        d3.selectAll(".glss" + i)
            .transition()
    })

// the actual circle
svg.selectAll("blank")
    .data(d3.range(nbr))
    .enter()
    .append("circle")
    .attr({
        "cx": function(d,i){ return (i % col) * (w / col)},
        "cy": function(d,i){ return (Math.floor(i / col) + 1) * (w / col); },
        "r": cr,
        "fill": function(d,i){ return "#7E07A9"; },
        "class": function(d,i){ return "glss glss" + i; }
    })

我回到文档中，发现它建议在设置Voronoi函数时添加clipPath，这将解决问题

而不是：

d3.geom.voronoi（数据）

使用

您需要以清晰的方式完全重写您的问题。否则，没有人会理解任何东西。好奇者和好奇者。这似乎只发生在Chrome上。它适用于Firefox和Safari。@音乐方面，谢谢你的格式化，很好的评论，它适用于Firefox！我正在重新写问题。具有讽刺意味的是：我在尝试Voronoi覆盖，以便在小实例上更好地选择。
var col = 64;
var cr = 3;
var rwidth = (w / col);

var offset = (rwidth / 2);

// overlay: a rect that is placed around the circle space
svg.selectAll("blank")
    .data(d3.range(nbr))
    .enter()
    .append("rect")
    .attr({
        "x": function(d,i){ return (i % col) * (rwidth) - offset; },
        "y": function(d,i){ return (Math.floor(i / col) + 1) * (rwidth) - offset; },
        "width": rwidth,
        "height": rwidth,
        "fill": "white"
    })
    .on("mousemove", function(d, i){
        // do what you want to do when overlay is triggered
        d3.selectAll(".glss" + i)
            .transition()
    })

// the actual circle
svg.selectAll("blank")
    .data(d3.range(nbr))
    .enter()
    .append("circle")
    .attr({
        "cx": function(d,i){ return (i % col) * (w / col)},
        "cy": function(d,i){ return (Math.floor(i / col) + 1) * (w / col); },
        "r": cr,
        "fill": function(d,i){ return "#7E07A9"; },
        "class": function(d,i){ return "glss glss" + i; }
    })

var padding = 0;
var vor = d3.geom.voronoi().clipExtent([[padding, padding], [w - padding, h - padding]])

  paths.selectAll("path")
    .data(vor(vertices))