노드에서 모든 자식 요소를 제거한 다음 다른 색상과 크기로 다시 적용하려면 어떻게해야합니까?

노드에서 모든 자식 요소를 제거한 다음 다른 색상과 크기로 다시 적용하려면 어떻게해야합니까?

---

그래서 노드, 링크 및 기타 요소를 설정하기위한 다음 강제 레이아웃 그래프 코드가 있습니다.

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')입니까?

---

귀하의 답변은 효과가 있지만 후손에게는 이러한 방법이 더 일반적입니다.

HTML에서 모든 하위 항목을 제거합니다.

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

SVG / HTML에서 모든 하위 항목을 제거합니다.

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

The .html("") call works with my SVG, but it might be a side effect of using innerSVG.

---

My first advice is that you should read the d3.js API about selections: https://github.com/mbostock/d3/wiki/Selections

You have to understand how the enter() command works (API). The fact that you have to use it to handle new nodes has a meaning which will help you.

Here is the basic process when you deal with selection.data():

• first you want to "attach" some data to the selection. So you have:

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

• Then you can modify all nodes each times data is changed (this will do exactly what you want). If for example you change the radius of old nodes which are in the new dataset you loaded

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

• Then, you have to handle new nodes, for this you have to select the new nodes, this is what selection.enter() is made for:

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

• Finally you certainly want to remove the nodes you don't want anymore, to do this, you have to select them, this is what selection.exit() is made for.

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

A good example of the whole process can also be found on the API wiki: https://github.com/mbostock/d3/wiki/Selections#wiki-exit

---

in this way, I have resolved it very easily,

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

and then I just re-added visual elements which were rendered differently because the code for calculating radius and color had changed properties. Thank you.

---

If you want to remove the element itself, just use element.remove(), as you did. In case you just want to remove the content of the element, but keep the element as-is, you can use f.ex.

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

instead of .html("") (I wasn't sure which element's children you want deleted). This keeps the element itself, but cleans all included content. It the official way to do this, so should work cross-browser.

PS: you wanted to change the circle sizes. Have you tried

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

---

To remove all element from a node:

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

참고URL : https://stackoverflow.com/questions/14422198/how-do-i-remove-all-children-elements-from-a-node-and-then-apply-them-again-with