Добавление нового узла в вынужденный симуляция вызывает преобразование-трансляцию только на новый узел - PullRequest
Новая
       35

Добавление нового узла в вынужденный симуляция вызывает преобразование-трансляцию только на новый узел

0 голосов
/ 30 марта 2019

Я пытаюсь построить динамический форсированный граф с помощью d3, используя forceSimulation.Когда я строю график с жестко закодированными узлами и связываю все элементы, построенные как ожидалось.Но когда я добавляю новый узел, все старые узлы не будут переводить свое местоположение, а когда я перетаскиваю старые узлы, перемещается только новый узел (когда я перемещаю новый узел, он перемещается, как ожидалось).

Я пытался изменить способ тика симуляции, но не смог решить эту проблему. 

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 (), я могу перетащить только новый добавленный узел.Все остальные узлы застряли, и когда я перетаскиваю их, меняется только местоположение нового узла.Любая помощь будет отличной!Спасибо.

1 Ответ

0 голосов
/ 31 марта 2019

Решено! Тиковая функция должна передаваться в начале симуляции, а не в функции обновления: 

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 + ")"; });
}
...