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

Question 1

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

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')?

Question 2

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

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

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

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

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

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

Question 3

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

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

यहाँ मूल प्रक्रिया है जब आप के साथ सौदा 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 4

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

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

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

Question 5

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

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

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

पुनश्च: आप सर्कल आकार बदलना चाहते थे। आपने कोशिश की है

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

Question 6

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

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