Question

我使用以下更新函数从一组节点和链接中绘制图表，其中包含代码中前面定义的节点和链接数组。

      function update() {
          var link = svg.selectAll(".link")
          .data(links);
          link.enter().insert("line")
            .attr("class", "link");

          var node = svg.selectAll(".node")
          .data(nodes);
          node.enter().append("svg:g")
              .attr("class", "node")
              .attr("id", function(d) { return d.name })
              .on("dblclick", dblclick)
              .on("mouseover", function(d) {drawTags(tags, d.name);})
              .on("mouseout", function(d) {
                  d3.select("#"+d.name).selectAll(".tool")
                    .transition()
                    .delay(800)
                    .remove();
                  })
              .call(force.drag);

              node.append("circle")
              .attr("class", "circle")
              .attr("r", 40);

              // display name in nodes if node structure
              node.append("text")
              .attr("text-anchor", "middle")
              .attr("dy", ".35em")
              .text(function(d) { return d.name; });

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

在动态更新图形时，在节点上双击事件后，我会获取其他节点和链接并显示它们。到目前为止，我能够将节点和链接附加到相应的数组，从而更新绘图。但是，更新功能将遍历显示的所有元素。

因此，我想将newNodes和newEdges传递给更新函数，只绘制新元素。问题是新元素会替换svg代码中的现有元素而不是附加。

有没有办法将新元素附加到图纸中以前存在的元素？鼠标悬停在节点上的小提琴（https://jsfiddle.net/pducrot/4eyb81kx/）上可以使用完整代码，然后点击任何显示的标签即可查看正在发生的事情。

如何在添加元素后部分更新图形？

0 个答案: