d3在Chrome上Voronoi疊加最小距離？ （Firefox可以工作）

Question

我正在嘗試在圖表上添加Voronoi疊加層，但是似乎當點之間的間隔小於20px時，將永遠不會選擇某些路徑，尤其是對於起點和終點。 多虧了musically_ut ，他注意到這僅在Chrome瀏覽器上發生。

我回過頭去玩Voronoi上的原始文章，發現了同樣的問題（ JSFiddle ）。

  var vertices = d3.range(100).map(function(d, i) {        
    // return [Math.random() * w, Math.random() * h]; //original line
    return [i * 10, 10]; // change this line!
  });

我認為這與clipPath的r值有關，但事實並非如此： r值為5問題仍然存在。

Answer 1

我回到文檔中，結果發現建議在設置Voronoi函數時添加一個clipPath來解決此問題。

代替：

d3.geom.voronoi(data)

采用

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

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

的jsfiddle

Answer 2

對於任何遇到類似情況並需要快速修復的人，我都會發布有關此問題的解決方法。 我仍在尋找發生這種情況的原因。

我的解決方法是手動創建覆蓋區域，在這種情況下，布局邏輯相當簡單。

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; }
    })