Javascript 向d3.js力定向图动态添加节点

我在d3.js力定向图中动态添加节点时遇到了问题，我想知道这里是否有人能对此有所了解

我遇到的问题是，我希望tick函数转换图上的所有节点，而不仅仅是新添加的节点

以下是我用于添加节点和处理转换的函数：

// Function to handle tick event
function tick() {
     tick_path.attr("d", function(d) {
     var dx = d.target.x - d.source.x,
     dy = d.target.y - d.source.y,
     dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + 
        d.source.x + "," + 
        d.source.y + "L" + 
        d.target.x + "," + 
        d.target.y;
     });

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


 /**
   * Append nodes to graph.
   */
 function addNodes2Graph(){

    // define the nodes
       // selection will return none in the first insert
       // enter() removes duplicates (assigning nodes = nodes.enter() returns only the non-duplicates)
    var nodes = viz.selectAll(".node") 
    .data(g_nodes)
    .enter().append("g") 
    .on("click", nodeClick)
    .call(force.drag);

    // From here on, only non-duplicates are left
    nodes
        .append("circle")
        .attr("r", 12)
        .attr("class", "node");

    nodes.append("svg:image")
    .attr("class", "circle")
    .attr("xlink:href", "img/computer.svg")
    .attr("x", "-8px")
    .attr("y", "-8px")
    .attr("width", "16px")
    .attr("height", "16px");

   // add the text 
    nodes.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
        .text(function(d) { return d.ip; });


     return nodes;
 }

 // Execution (snippet)

 // Add new nodes
 tick_node = addNodes2Graph();
 // Add new paths
 tick_path = addPaths2Graph();


 // Restart graph
 force
.nodes(g_nodes) // g_nodes is an array which stores unique nodes
.links(g_edges) // g_edges stores unique edges
.size([width, height])
.gravity(0.05)
.charge(-700)
.friction(0.3)
.linkDistance(150)
.on("tick", tick)
.start();

我认为问题在于，我只能从addNodes2Graph返回非重复结果，然后在tick函数中使用该结果，但我不确定如何在不向图中添加重复节点的情况下实现这一点

目前，它要么将重复的元素添加到图形中，要么只转换tick上的新节点

---

非常感谢您事先的帮助

看起来您只是将节点添加到DOM中，而不是添加到force布局中。总而言之，以下是向force布局添加节点所需的操作

将元素添加到force布局用于其节点的数组中。这需要与最初传入的数组相同，也就是说，如果需要平滑的行为，就不能创建新数组并传入该数组。修改force.nodes应该可以正常工作。 对链接执行相同的操作。 使用.data.enter和新数据添加新的DOM元素。 不需要更改tick函数，因为添加节点和DOM元素是在别处完成的。

---

添加新节点/链接后，您需要再次调用force.start以将其考虑在内。

看起来您只是将节点添加到DOM，而不是force布局。总而言之，以下是向force布局添加节点所需的操作

将元素添加到force布局用于其节点的数组中。这需要与最初传入的数组相同，也就是说，如果需要平滑的行为，就不能创建新数组并传入该数组。修改force.nodes应该可以正常工作。 对链接执行相同的操作。 使用.data.enter和新数据添加新的DOM元素。 不需要更改tick函数，因为添加节点和DOM元素是在别处完成的。

---

添加新节点/链接后，您需要再次调用force.start以将其考虑在内。

文档表明您必须再次调用force.start以使其识别新节点。这是不正确的吗？嗨，拉尔斯-这不是我看到的，没有添加force.start D3似乎忽略了添加的新节点。抱歉，我的评论不清楚-我的意思是你是正确的，你确实需要调用force.start。我会更新答案。谢谢。文档表明您必须再次调用force.start，它才能识别新节点。这是不正确的吗？嗨，拉尔斯-这不是我看到的，没有添加force.start D3似乎忽略了添加的新节点。抱歉，我的评论不清楚-我的意思是你是正确的，你确实需要调用force.start。我会更新答案。谢谢