पहला लिंक आइटम क्यों छोड़ा जा रहा है?

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

समस्या यह है कि डी 3 डिफ़ॉल्ट रूप से इंडेक्स द्वारा आपके डेटा में आपके चयन .selectAll("path") से मेल खाता है और एसवीजी में पहले से ही एक पथ है (defs में)। यही है, पहला डेटा तत्व एसवीजी में पहले पथ से मेल खाता है, जो पहले से ही वहां है। इसलिए, यह .enter() चयन में नहीं है।

इसे ठीक करने का तरीका .data() के वैकल्पिक दूसरे तर्क में एक फ़ंक्शन निर्दिष्ट करना है ताकि डी 3 को तत्वों से मिलान कैसे किया जा सके, उदा।

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