अंतर्निहित डेटा

Question

बदलता है जब मैं अपनी वेबसाइट पर एक नेटवर्क दिखाने के लिए बल लेआउट उदाहरणों (http://bl.ocks.org/1153292) का उपयोग कर रहा हूं, डी 3 फोर्स लेआउट के तत्वों को कैसे अपडेट करें।

मैं उपयोगकर्ता को यह चुनने की अनुमति देता हूं कि किसी भी समय किस प्रकार के लिंक देखने के लिए। मुझे पता है कि जब मैं लिंक प्रकार ए देखना चुनता हूं, तो लिंक प्रकार बी जोड़ें और फिर लिंक प्रकार ए हटाएं ए प्रकार के बी के बने लिंक ए रंग के साथ प्रस्तुत किए जाते हैं।

यह वह कोड है जो svg आरेख के लिंक जोड़ने के लिए चलाता है। मैं इसे जोड़ने और हटाने के द्वारा सर this.links बदल रहा हूं। आप देख सकते हैं मैं वर्ग विशेषता सेट, लेकिन यह अद्यतन करने नहीं है - यह लिंक ए के प्रकार की बनी हुई है

var path = svg.append("svg:g") 
    .selectAll("path") 
    .data(this.links) 
    .enter() 
    .append("svg:path") 
    .attr("class", function(d) { return "link " + d.type; }) 
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); 

मैं वर्तमान में टिक समारोह के अंदर वर्ग विशेषता को अपडेट करके इस समस्या को हल इस पाठ्यक्रम कारण बंद है, लेकिन बहुत जरूरी काम

मैंने पढ़ा है कि एंटरप्राइज़ ऑपरेशन मौजूदा तत्वों का एक विलय चयन लौटाता है और नए भी इसलिए एटीआर ऑपरेशन को मौजूदा अपडेट करना चाहिए और नया सेट करना चाहिए।

मुझे क्या याद आ रही है?

Answer 1

मैंने पाया answer in this post

var circle = svg.selectAll("circle") 
    .data(data); 

circle.enter().append("circle") 
    .attr("r", 2.5); 

circle 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }); 

circle.exit().remove(); 

जवाब है कि मैं selectAll.data के परिणाम पर और संलग्न ऑपरेटर के परिणाम पर नहीं attr ऑपरेटर कॉल करने की आवश्यकता है।

Answer 2

http://bl.ocks.org/1095795 पर एक उदाहरण है जो एक बल निर्देशित लेआउट से नोड जोड़ने और निकालने का दिखाता है। लिंक और नोड्स को अलग से संभाला जाना चाहिए और फिर बल लेआउट को पुनरारंभ करना होगा।

function restart() { 
    var link = vis.selectAll("line.link") 
     .data(links, function(d) { return d.source.id + "-" + d.target.id; }); 

    link.enter().insert("svg:line", "g.node") 
     .attr("class", "link"); 

    link.exit().remove(); 

    var node = vis.selectAll("g.node") 
     .data(nodes, function(d) { return d.id;}); 

    var nodeEnter = node.enter().append("svg:g") 
     .attr("class", "node") 
     .call(force.drag); 

    nodeEnter.append("svg:image") 
     .attr("class", "circle") 
     .attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png") 
     .attr("x", "-8px") 
     .attr("y", "-8px") 
     .attr("width", "16px") 
     .attr("height", "16px"); 

    nodeEnter.append("svg:text") 
     .attr("class", "nodetext") 
     .attr("dx", 12) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.id }); 

    node.exit().remove(); 

    force.start(); 
}