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


Answers

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

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

जब आप select.data 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

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''.circles' जोड़ा है।

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

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




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

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]);
    }
}`



Related