Question

我正在尝试使用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（）函数时，我只能拖动添加的新节点。所有其他节点都被卡住，当我拖动它们时，它只会更改新节点的位置。任何帮助都会很棒！谢谢。

Answer 1

解决了！刻度函数应在仿真启动时传递，而不应在更新函数中传递：

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

向forcedSimulation添加新节点会导致仅将translate-translate转换为新节点

1 个答案: