0

forceSimulation を使用して、d3 で動的な強制グラフを構築しようとしています。ハードコーディングされたノードとリンクを使用してグラフを作成すると、すべてのアイテムが期待どおりに作成されます。しかし、新しいノードを追加すると、すべての古いノードはその場所を変換しません。古いノードをドラッグすると、新しいノードのみが移動します(新しいノードを移動すると、期待どおりに移動します)。

シミュレーションのティックの方法を変更しようとしましたが、これを解決できませんでした。

var nodes = [{ "id": 0, "name": "Ego Node", "level": 0 },
             { "id": 1, "name": "first", "level": 1 },
             { "id": 2, "name": "Ego Node", "level": 2 }],
    links = [{ source: 0, target: 1 },
             { source: 1, target: 2 }]

var simulation = d3.forceSimulation(nodes)
    .force('charge', d3.forceManyBody().strength(-100))
    .force('center', d3.forceCenter(width / 2, height / 2))
    .force('link', d3.forceLink().links(links));

function update() {
    var link = d3.select('.links')
        .selectAll('line.link')
        .data(links).enter().insert("line")
        .attr("class", "link")
        .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; });

    link.exit().remove();

    node = d3.select('.nodes')
        .selectAll('g.node')
        .data(nodes).enter().append("g")
        .attr("class", "node");

    node.append("circle")
        .style("fill", function (d) {return "#0099ff"})
        .attr("r", 5);

    node.append("text")
        .attr("class", "nodetext")
        .attr("x", "0em")
        .attr("y", 15)
        .text(function (d) { return d.name });


    node.exit().remove();

    simulation.on("tick", function () {
        link.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; });

        node.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
    });

    simulation.nodes(nodes);
    simulation.force('link', d3.forceLink().links(links));
    simulation.alpha(1).restart();
}

function addNode() {
    nodes.push({ "Id": 3, "name": "AAA", "level": 2 });
    links.push({ source: 1, target: 3 });
    update();
}

関数 addNode() を実行すると、追加された新しいノードのみをドラッグできます。他のすべてのノードがスタックしており、それらをドラッグすると、新しいノードの位置のみが変更されます。どんな助けでも素晴らしいでしょう！ありがとう。

4

1 に答える 1

0

解決しました！tick 関数は、更新関数ではなく、シミュレーションの開始時に渡す必要があります。

var simulation = d3.forceSimulation(nodes)
    .force('x', d3.forceX((d) => getXloc(d.level)).strength(2))
    .force('charge', d3.forceManyBody().strength(-100))
    .force('center', d3.forceCenter(width / 2, height / 2))
    .force('link', d3.forceLink().links(links))
    .on('tick', ticked);

function ticked() {
    var link = d3.select('.links')
        .selectAll('line.link')
        .data(links);
    link.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; });


    node = d3.select('.nodes')
        .selectAll('g.node')
        .data(nodes);

    node.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
}
于 2019-03-31T08:47:40.333 に答える