时间戳

首页 > 解决方案 > 在 d3 画布中动态添加节点

d3.js - 在 d3 画布中动态添加节点

问题描述

我是d3的新手。我尝试了几个带有 JSON 节点的示例，并得到了一个很好的工作网络图。

但是，当我尝试动态添加一个额外的节点时，它不会出现在屏幕上。

我从Force Dragging III Canvas开始，然后尝试添加以下代码，但它不起作用；我该如何解决这个问题，请帮忙？

graph.addNode("NewNode");

function addNode (id) {
    nodes.push({"id":id});
    restart();

}


function restart() {
  node = node.data(nodes);

  node.enter().insert("circle", ".cursor")
      .attr("class", "node")
      .attr("r", 5);


  node.exit()
      .remove();

  link = link.data(links);

  link.enter().insert("line", ".node")
      .attr("class", "link");
  link.exit()
      .remove();

  force.start();
}

标签： d3.jsforce-layout

解决方案

有一些不太明显的力量在起作用：

  • 初始化后，原始数据数组中的节点获得了一堆新属性
  • 初始化后，原始数据数组中的链接将转换为新形式。

此外，如果您遵循链接的示例，则不需要进入/更新/退出样式循环 - 强制使用原始数据数组，而不是任何 DOM 元素。

节点

在您的参考示例中，节点仅以 id 和组开头：

{"source": "Montparnasse", "target": "Babet", "value": 2}

但是，在用 初始化后simulation.nodes(nodes)，它们会得到一些附加参数：

group: 1
id: "Myriel"
index: 0
vx: 0.0026819653036056477
vy: -0.0005005454729913666
x: 306.003096668046
y: 359.07887474183434

这四个附加属性跟踪节点。每个刻度都要求这些属性已经存在，如果它们不存在，我们就会遇到问题。所以如果我们提供一个新节点，我们可以给它 x,y,vy,vx 属性，以便无缝添加（例如，在所有示例中单击以添加节点）。这给出了一个简单的 addNode 函数：

  function addNode () {
    var id = graph.nodes.length;
    graph.nodes.push({"id":id, index: id, x: width/2, y: height/2, vx: 0, vy: 0});
  }

simulation.nodes()或者，我们可以使用( example )重新初始化节点，力会在为其提供所需位置的同时自动放置它。但是，除非您指定 x 和 y 坐标（示例），否则这很容易出错。

最后一个也为我们提供了一个非常直接的 addNode 函数：

  function addNode () {
    var id = graph.nodes.length;
    graph.nodes.push({"id":id, group: 12, x: width/2, y: height/2});
    simulation.nodes(graph.nodes)
  }

这应该有助于将节点添加到部队中。

链接

对于链接，您的参考示例中的原始数据在加载时如下所示：

{ source: "Napoleon", target: "Myriel", value: 1 }

但是，在初始化链接后，采用以下形式：

index: 0
source: Object { id: "Napoleon", group: 1, index: 1, … } 
target: Object { id: "Myriel", group: 1, index: 0, … }
value: 1

源和目标属性被转换为代表每个点的对象。与节点一样，勾选功能要求节点采用后一种形式。和上面一样，我们可以尝试复制格式，或者使用强制设置格式本身，我选择后者作为链接，而在这里设置新节点的x，y 。这是用于此的 addNode 函数：

  function addNode () {
    var id = graph.nodes.length;
    graph.nodes.push({"id": id, x: width/2, y: height/2});
    graph.links.push({source: "Javert", target: id });

  simulation
      .nodes(graph.nodes)
      .force("link")
      .links(graph.links);  
  }

作为一个更复杂但理论较少的示例，此问题/答案可能很有趣（以及相关的块（单击以添加/删除节点，使用左上角的按钮切换哪个操作）），其中添加/删除节点反过来会影响力量和沃罗诺伊

推荐阅读