मैं नोड से सभी बच्चों के तत्वों को कैसे हटा सकता हूं और फिर उन्हें अलग-अलग रंग और आकार के साथ फिर से लागू कर सकता हूं?

Question

तो मैं नोड्स, लिंक और अन्य तत्वों की स्थापना के लिए अगले बल लेआउट ग्राफ कोड है:

var setLinks = function() 
{ 
    link = visualRoot.selectAll("line.link") 
     .data(graphData.links) 
     .enter().append("svg:line") 
     .attr("class", "link") 
     .style("stroke-width", function (d) { return nodeStrokeColorDefault; }) 
     .style("stroke", function (d) { return fill(d); }) 
     .attr("x1", function (d) { return d.source.x; }) 
     .attr("y1", function (d) { return d.source.y; }) 
     .attr("x2", function (d) { return d.target.x; }) 
     .attr("y2", function (d) { return d.target.y; }); 

    graphData.links.forEach(function (d) 
    { 
     linkedByIndex[d.source.index + "," + d.target.index] = 1; 
    }); 
}; 


var setNodes = function() 
{ 
    node = visualRoot.selectAll(".node") 
     .data(graphData.nodes) 
     .enter().append("g") 
     .attr("id", function (d) { return d.id; }) 
     .attr("title", function (d) { return d.name; }) 
     .attr("class", "node") 
     .on("click", function (d, i) { loadAdditionalData(d.userID, this); }) 
     .call(force.drag) 
     .on("mouseover", fadeNode(.1)).on("mouseout", fadeNode(1)); 
}; 

//append the visual element to the node 
var appendVisualElementsToNodes = function() 
{ 
    node.append("circle") 
     .attr("id", function (d) { return "circleid_" + d.id; }) 
     .attr("class", "circle") 
     .attr("cx", function (d) { return 0; }) 
     .attr("cy", function (d) { return 0; }) 
     .attr("r", function (d) { return getNodeSize(d); }) 
     .style("fill", function (d) { return getNodeColor(d); }) 
     .style("stroke", function (d) { return nodeStrokeColorDefault; }) 
     .style("stroke-width", function (d) { return nodeStrokeWidthDefault; }); 

    //context menu: 
    d3.selectAll(".circle").on("contextmenu", function (data, index) 
    { 
     d3.select('#my_custom_menu') 
      .style('position', 'absolute') 
      .style('left', d3.event.dx + "px") 
      .style('top', d3.event.dy + "px") 
      .style('display', 'block'); 

     d3.event.preventDefault(); 
    }); 
    //d3.select("svg").node().oncontextmenu = function(){return false;}; 

    node.append("image") 
     .attr("class", "image") 
     .attr("xlink:href", function (d) { return d.profile_image_url; })//"Images/twitterimage_2.png" 
     .attr("x", -12) 
     .attr("y", -12) 
     .attr("width", 24) 
     .attr("height", 24); 

    node.append("svg:title") 
     .text(function (d) { return d.name + "\n" + d.description; }); 
}; 

अब, रंग और आकार निर्भरता बदल गया है और मैं साथ ग्राफ हलकों (+ सभी संलग्न तत्वों) पुनः बनाने की जरूरत है अलग रंग और त्रिज्या। इसके साथ समस्या हो रही है।

मैं यह कर सकता:

visualRoot.selectAll(".circle").remove(); 

लेकिन मैं सभी छवियों है कि मैं अभी भी वहाँ '.circles' से जुड़ी है।

किसी भी तरह से, किसी भी मदद की सराहना की जाएगी, मुझे बताएं कि क्या स्पष्टीकरण पर्याप्त स्पष्ट नहीं है, मैं इसे ठीक करने की कोशिश करूंगा।

पीएस graphData.nodes और d3.selectAll('.nodes') के बीच क्या अंतर है?

Answer 1

आपका जवाब काम करेंगे, लेकिन भावी पीढ़ी के लिए, इन तरीकों अधिक सामान्य हैं।

निकालें HTML से सभी बच्चों:

d3.select("div.parent").html(""); 

एसवीजी/HTML से सभी बच्चों को निकालें:

d3.select("g.parent").selectAll("*").remove(); 

.html("") कॉल मेरी एसवीजी के साथ काम करता है, लेकिन यह innerSVG का उपयोग करने का एक पक्ष प्रभाव हो सकता है ।

Answer 2

मेरी पहली सलाह है कि आप चयन के बारे में d3.js एपीआई पढ़ना चाहिए: https://github.com/mbostock/d3/wiki/Selections

आप को समझना होगा कि कैसे enter() आदेश काम करता है (API)। तथ्य यह है कि आपको नए नोड्स को संभालने के लिए इसका उपयोग करना है, इसका अर्थ है जो आपकी मदद करेगा।

• पहले आप चयन के लिए कुछ डेटा "संलग्न" करना चाहते हैं:

  यहाँ बुनियादी प्रक्रिया है जब आप selection.data() के साथ सौदा है। तो तुम हो:

  var nodes = visualRoot.selectAll(".node") 
      .data(graphData.nodes) 
  

• तो फिर तुम सभी नोड्स एक बार डेटा बदल गया है (यह वास्तव में आप क्या चाहते हो जाएगा) को संशोधित कर सकते हैं। उदाहरण के लिए आप पुराने नोड्स की त्रिज्या जो नए डाटासेट में हैं बदलते हैं तो आपको

  nodes.attr("r", function(d){return d.radius}) 
  

• फिर भरी हुई, आप नए नोड्स को संभालने के लिए है, इस के लिए आप नए नोड्स का चयन करने के लिए है, यह क्या selection.enter() है के लिए बने:

  var nodesEnter = nodes.enter() 
      .attr("fill", "red") 
      .attr("r", function(d){return d.radius}) 
  

• अंत में आप निश्चित रूप से नोड्स आप नहीं करना चाहते दूर करने के लिए, यह करने के लिए, आप उनका चयन करने के लिए है चाहता हूँ, यह क्या selection.exit() के लिए किया जाता है।

  var nodesRemove = nodes.exit().remove() 
  

पूरी प्रक्रिया का एक अच्छा उदाहरण भी एपीआई विकि पर पाया जा सकता है: https://github.com/mbostock/d3/wiki/Selections#wiki-exit

Answer 3

इस तरह से, मैं बहुत आसानी से, यह समाधान कर लिया है

visualRoot.selectAll(".circle").remove(); 
visualRoot.selectAll(".image").remove(); 

और तो मैंने दृश्य तत्वों को फिर से जोड़ा जो कि अलग-अलग प्रदान किए गए थे क्योंकि त्रिज्या और रंग की गणना के लिए कोड गुण बदल गए थे। धन्यवाद।

Answer 4

एक नोड से सभी तत्व निकालने के लिए:

var siblings = element.parentNode.childNodes; 
for (var i = 0; i < siblings.length; i++) { 
    for (var j = 0; j < siblings.length; j++) { 
     siblings[i].parentElement.removeChild(siblings[j]); 
    } 
}` 

Answer 5

यदि आप तत्व को स्वयं हटाना चाहते हैं, तो बस element.remove() का उपयोग करें, जैसा आपने किया था। यदि आप तत्व की सामग्री को हटाना चाहते हैं, लेकिन तत्व को इस तरह रखें, तो आप f.ex. का उपयोग कर सकते हैं।

visualRoot.selectAll(".circle").html(null); 
visualRoot.selectAll(".image").html(null); 

.html("") के बजाय (मुझे यकीन नहीं था कि आप किस तत्व के बच्चे को हटाना चाहते हैं)। यह तत्व को स्वयं रखता है, लेकिन सभी शामिल सामग्री साफ़ करता है। यह the official way to do this है, इसलिए क्रॉस-ब्राउज़र काम करना चाहिए।

पीएस: आप सर्कल आकार बदलना चाहते थे। आप

d3.selectAll(".circle").attr("r", newValue);