Question

我无法动态地将节点添加到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上的新节点。

非常感谢您的帮助。

Answer 1

看起来您只将节点添加到DOM，而不是强制布局。回顾一下，这是将节点添加到力布局中需要做的事情。

向强制布局用于其节点的数组添加元素。这需要是您最初传入的相同的数组，即如果您想要平滑的行为，则无法创建新数组并传递它。修改force.nodes()应该可以正常工作。
对链接也这样做。
使用.data().enter()添加新DOM元素和新数据。
不需要更改tick函数，因为添加节点和DOM元素是在其他地方完成的。

添加新节点/链接后，您需要再次致电force.start()，以便将其考虑在内。

动态添加节点到d3.js强制有向图

1 个答案: