95

したがって、ノード、リンク、およびその他の要素を設定するための次のフォース レイアウト グラフ コードがあります。

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 PSとの違いは何d3.selectAll('.nodes')ですか?

4

5 に答える 5

146

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

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

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

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

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

呼び出しは私のSVG で機能しますが、 innerSVG.html("")を使用することの副作用である可能性があります。

于 2014-03-20T03:43:51.933 に答える
9

d3.js私の最初のアドバイスは、選択に関する APIを読むことです: 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()

プロセス全体の良い例は、API wiki にもあります: https://github.com/mbostock/d3/wiki/Selections#wiki-exit

于 2013-01-20T15:18:07.457 に答える
7

このようにして、私はそれを非常に簡単に解決しました。

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

次に、半径と色を計算するコードのプロパティが変更されたため、レンダリングが異なる視覚要素を再度追加しました。ありがとうございました。

于 2013-01-21T04:48:37.077 に答える
7

要素自体を削除したい場合は、先ほどと同じようelement.remove()に , を使用してください。要素のコンテンツを削除するだけで、要素をそのまま保持したい場合は、f.ex を使用できます。

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

代わりに.html("")（削除したい要素の子がわかりませんでした）。これにより、要素自体は保持されますが、含まれているすべてのコンテンツが削除されます。これはこれを行うための公式の方法であるため、クロスブラウザーで動作するはずです。

PS: 円のサイズを変更したかったのです。やってみました

d3.selectAll(".circle").attr("r", newValue);
于 2017-04-27T15:22:18.757 に答える
3

ノードからすべての要素を削除するには:

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]);
    }
}`
于 2013-01-22T05:02:47.680 に答える