javascript - How to dynamically add links to a d3 topology? -

मैंने उदाहरण लिया और एक अतिरिक्त लिंक जोड़ने और enter () का उपयोग करके लेआउट को अपडेट करने का प्रयास किया, लेकिन तब सभी लिंक्स गायब हो गए और फायरबग कोई भी त्रुटि नहीं दिखाती।

क्या इन पंक्तियों से लिंक नहीं जोड़ा जाना चाहिए?
graph.links.push ({"source": 0, "target": 11});
link = link एटीआर ("वर्ग", फ़ंक्शन (डी, आई) {console.log (i); "लिंक";});

इसके अलावा, console.log (i) आउटपुट 18 के बजाय 19 । ऐसा लगता है जैसे कि यह कभी भी ग्राफ सर के आकार में वृद्धि को ध्यान में नहीं रखता।

मैंने चेक किया, लेकिन यहाँ भी यह डेटा () का उपयोग करने की तरह लगता है < / Code> और enter () फ़ंक्शंस पर्याप्त होना चाहिए था।

कोड:

  & lt;! DOCTYPE html & gt; & Lt; मेटा वर्णसेट = "यूटीएफ -8" & gt; & LT; शैली & gt; .link {स्ट्रोक: # 000; स्ट्रोक-चौड़ाई: 1.5px; } .नोड {कर्सर: चाल; भरें: # सीसीसी; स्ट्रोक: # 000; स्ट्रोक-चौड़ाई: 1.5px; } .node.fixed {fill: # f00; } & Lt; / style & gt; & LT; बॉडी & gt; & Lt; स्क्रिप्ट src = "http://d3js.org/d3.v3.min.js" & gt; & lt; / स्क्रिप्ट & gt; & LT; स्क्रिप्ट & gt; {"X": {{"x": 469, "y": 410}, {"x": 493, "y": 364}, {"x": 442, "y": 365} {"एक्स": 467, "y": 314}, {"x": 477, "y": 248}, {"x": 425, "y": 207}, {"x": 402, "Y": 155}, {"x": 36 9, "y": 1 9 6}, {"x": 350, "y": 148}, {"x": 539, "y": 222}, { "एक्स": 594, "y": 235}, {"x": 582, "y": 185}, {"x": 633, "y": 200}], "लिंक": [{स्रोत "," लक्ष्य ": 1}, {" स्रोत ": 1," लक्ष्य ": 2}, {" स्रोत ": 2," लक्ष्य ": 0}, {" स्रोत ": 1," लक्ष्य ": 3}, "लक्ष्य": 2}, {2}, {"स्रोत": 3, "लक्ष्य": 4}, {"स्रोत": 4, "लक्ष्य": 5}, {"स्रोत": 5, "लक्ष्य": 6}, {"स्रोत": 5, "लक्ष्य": 7}, {"स्रोत": 6, "लक्ष्य": 7}, {"स्रोत": 6, "लक्ष्य": 8} {"स्रोत": 7, "लक्ष्य": 8}, {"स्रोत": 9, "लक्ष्य": 4}, {"स्रोत": 9, "लक्ष्य": 11}, {"स्रोत": 9, "लक्ष्य": 10}, {"स्रोत": 10, "लक्ष्य": 11}, {"स्रोत": 11, "लक्ष्य": 12}, {"स्रोत": 12, "लक्ष्य": 10}]} ; Var चौड़ाई = 960, ऊंचाई = 500; Var बल = d3.layout.force ()। आकार ([चौड़ाई, ऊंचाई])। प्रभार (-400) .लिंकविवाद (40) .on ("टिक", टिक); Var drag = force.drag () .on ("dragstart", dragstart); Var svg = d3.select ("body")। संलग्न ("svg") .attr ("width", width) .attr ("height", height); Var लिंक = svg.selectAll ("। लिंक"), नोड = svg.selectAll ("। नोड"); //d3.json ("graph.json), फ़ंक्शन (त्रुटि, ग्राफ) {force.nodes (graph.nodes) .links (graph.links) .start (); link = link.data (graph.links)। एन्टर ("लाइन")। एट्र ("वर्ग", "लिंक"); नोड = नोडडेटा (आलेख.नोड) .एन्टर () .एंडेंड ("सर्कल") .attr ("class", "नोड") .attr ("r", 12) .on ("dblclick", dblclick) .कॉल (ड्रैग); //}); console.log (graph.links.length); Graph.links.push ({"source": 0, "target": 11}); console.log (graph.links.length); Link = link.data (graph.links) .enter ()। Append ("line")। Attr ("class", "link"); फ़ंक्शन टिक () {link.attr ("x1", फ़ंक्शन (d) {return d.source.x;}) .attr ("y1", फ़ंक्शन (d) {return d.source.y;}) .attr ("एक्स 2", फ़ंक्शन (डी) {रिटर्न d.target.x;}) .attr ("y2", फ़ंक्शन (डी) {रिटर्न d.target.y;}); Node.attr ("cx", फ़ंक्शन (डी) {रिटर्न डी.एक्स;}) .attr ("cy", फ़ंक्शन (डी) {रिटर्न डी.आई;}); } फ़ंक्शन dblclick (d) {d3.select (this)। वर्गीकृत ("निश्चित", d.fixed = false); } फ़ंक्शन ड्रैगर्ट (डी) {d3.select (this)। वर्गीकृत ("निश्चित", d.fixed = true); } & Lt; / script & gt;  

मुख्य समस्या

  link = link है एडेर ("वर्ग", "लिंक")।  

इसके बाद, लिंक में केवल उन कड़ियों को शामिल किया जाएगा जो कि बस विज़ुअलाइज़ेशन में जोड़े गए थे क्योंकि आप .enter () । इसके बदले में इसका मतलब है कि केवल उनको टिक बल लेआउट की घटना के दौरान अद्यतन किया जाएगा, क्योंकि आप वही link चर का उपयोग कर रहे हैं यह नोड के लिए एक ही समस्या है।

तय करने के लिए, चयन चर को नए तत्वों को जोड़ने के बाद सभी प्रासंगिक तत्वों को शामिल करने के लिए सेट करें।

  लिंक = Svg.selectAll ("। लिंक");  

पूर्ण डेमो।