Tại sao mục Liên kết đầu tiên bị bỏ qua?

Question

Tôi đã có một hình ảnh khá đơn giản Tôi đang cố gắng để cùng nhau, nhưng có một vấn đề nhỏ với việc xử lý.

Nếu tôi sử dụng đoạn mã sau đây sau đó tất cả mọi thứ công trình như mong đợi:

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

Nếu tôi chuyển đổi này tuy nhiên để sử dụng một hơi khác nhau, sử dụng đường dẫn:

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

Sau đó, vì một lý do 'liên kết' đầu tiên bị thiếu. Bất cứ ai có thể đề nghị tại sao điều này có thể được? Có một JSFiddle here. Hiệu ứng mong đợi là mất tích, là tôi không có những đường tròn đẹp như tôi muốn.

Answer 1

Vấn đề là D3 khớp với lựa chọn của bạn .selectAll("path") đến dữ liệu của bạn theo chỉ mục theo mặc định và đã có đường dẫn trong SVG (trong defs). Tức là, phần tử dữ liệu đầu tiên khớp với đường dẫn đầu tiên trong SVG, đã có sẵn. Do đó, nó không có trong lựa chọn .enter().

Cách khắc phục điều này là chỉ định hàm trong đối số thứ hai tùy chọn là .data() để cho D3 biết cách so khớp các phần tử, ví dụ:

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