爲什麼第一個鏈接項目被跳過？

Question

我有一個相當簡單的可視化，我試圖放在一起，但處理有一個小問題。

如果我使用下面的代碼片段，然後一切正常：

var lines = svg.selectAll("line") 
         .data(data.links) 
         .enter() 
         .append("svg:line") 
          .attr("x1", function(d) { return findNode(data.nodes, d.source).x;}) 
          .attr("y1", function(d) { return findNode(data.nodes, d.source).y;}) 
          .attr("x2", function(d) { return findNode(data.nodes, d.target).x;}) 
          .attr("y2", function(d) { return findNode(data.nodes, d.target).y;}) 
          .style("stroke", "#838383") 
          .style("stroke-width", 1) 
          .style("marker-end", "url(#end-arrow)"); 

如果我轉不過這個使用稍微不同的一個，使用路徑：

var paths = svg.selectAll("path") 
         .data(data.links) 
         .enter() 
         .append("svg:path") 
          .attr("d", function(d) { 
           debugger; 
           var src = findNode(data.nodes, d.source); 
           var tgt = findNode(data.nodes, d.target); 
           var xi = d3.interpolateNumber(src.x, tgt.x); 
           var curvature = 0.8; 

           return "M" + src.x + "," + src.y 
            + "C" + xi(curvature) + "," + src.y 
            + " " + xi(1 - curvature) + "," + tgt.y 
            + " " + tgt.x + "," + tgt.y; 
          }) 
          .style("stroke", "#838383") 
          .attr("fill", "none"); 

然後由於某種原因，第一個'鏈接'缺失。任何人都可以提出爲什麼這可能是？有一個JSFiddle here。預期缺失的效果是，我沒有像我想要的那麼好的圓形線條。

Answer 1

問題是D3默認情況下會將您的選擇.selectAll("path")與您的數據按索引匹配，並且SVG中已經有一個路徑（在defs中）。也就是說，第一個數據元素與SVG中已經存在的第一個路徑相匹配。因此，它不在.enter()選擇。

解決此問題的方法是在可選的第二個參數.data()中指定一個函數來告訴D3如何匹配元素，例如，

.data(data.links, function(d, i) { return d + i; })