1

私は D3.js Force-Directed Graph をこの Demo hereのように使用しています。たとえば、このコードを変更し、円を SVG イメージとラベルで変更し、SVG パスでリンクします。ノードをクリックすると、子ノードが展開および折りたたまれ、ノードのマウス クリックで子ノードが追加および削除されます。

新しいノードを追加した後、既存のすべてのノードもイメージとラベルを再作成し、古いノードはまだ存在しますが、既存のノードに影響を与えないように新しいノードのみを更新したいと思います。

ノードの削除に関する同じ問題は、古いノードを新しいノードに置き換え、ノードに新しい要素を追加せず、他の既存のノードに影響を与えず、追加または削除されたノードのみを変更することになっています。

function update() {
    var nodes = flatten(root),
        links = d3.layout.tree().links(nodes);

    // Restart the force layout.
    force.nodes(nodes)
        .links(links)
        .linkDistance(120)
        .charge(-500)
        .start();

    path = vis.selectAll("path.link");
    path = path.data(force.links());
    path.enter().append("svg:path")
        .attr("class", "link")
        .attr("marker-end", "url(#end)");

    path.exit().remove();
    node = vis.selectAll(".node");
    node = node.data(force.nodes());
    node.enter().append("g")
        .attr("class", "node")
        .on("click", click)
        .call(force.drag);

    node.append("image")
        .attr("xlink:href", function (d) {
        return "http://t2.gstatic.com/images?q=tbn:ANd9GcT6fN48PEP2-z-JbutdhqfypsYdciYTAZEziHpBJZLAfM6rxqYX";
    })
        .attr("class", "image")
        .attr("x", -15)
        .attr("y", -15)
        .attr("width", 24)
        .attr("height", 24);

    node.append("text")
        .attr("class", "text")
        .attr("x", 40)
        .attr("dy", ".35em")
        .style("fill", color)
        .text(function (d) {
        return d.name;
    });

    node.exit().remove();
}

私はここで自分のコードでフィドルを作成しました。

4

1 に答える 1

2

ノード内の div ではなくノードを削除する必要があります。force.start() の前に 2 行追加するだけです。

vis.selectAll("path").remove();
vis.selectAll(".node").remove();

フィドルの更新版

于 2013-05-28T08:32:10.813 に答える