İlk Bağlantı öğesi neden atlanıyor?

Question

Bir araya getirmeye çalıştığım oldukça basit bir görselleştirme var, ancak işleme ile ilgili küçük bir sorun yaşıyorum.

Ben o zaman her şey beklendiği gibi çalışır aşağıdaki pasajı kullanıyorsanız:

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

Bu ancak yolları kullanarak, biraz farklı bir birini kullanın geçerseniz: nedense Sonra

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

ilk 'link' eksik. Bunun neden olabileceğini öneren var mı? JSFiddle here var. Beklenen etki, istediğim gibi güzel yuvarlak hatlara sahip olmamam.

Answer 1

sorun D3 varsayılan olarak dizine göre verilerinize seçiminizi .selectAll("path") eşleşir ve (defs cinsinden) SVG bir yol zaten olmasıdır. Yani, ilk veri elemanı zaten orada olan SVG'deki ilk yola eşleşir. Bu nedenle, .enter() seçiminde değil.

Bunu düzeltmenin yolu, D3'e öğelerin nasıl eşleştirileceğini söylemek için .data() numaralı isteğe bağlı ikinci bağımsız değişkeninde bir işlev belirtmektir.

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