[解決済み] ノードからすべての子要素を削除し、異なる色とサイズで再度適用するにはどうすればよいですか？

質問

ノード、リンク、その他の要素を設定するための次のフォースレイアウトグラフのコードを持っています。

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' に添付した画像はすべて残っています。

いずれにせよ、どんな助けでも感謝します。もし説明が十分に明確でなければ、私に知らせてください。

P.S. 次の違いは何ですか？ graphData.nodes と d3.selectAll('.nodes') ?

どのように解決するのですか？

あなたの答えはうまくいくでしょうが、後世のために、これらの方法はより一般的です。

HTMLからすべての子を削除します。

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

SVG/HTMLからすべての子要素を削除する。

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

は .html("") の呼び出しは私の SVG ではうまくいきますが、これは インナーSVG .