Javascript 在D3js力图中添加和删除节点

我正在从数据库加载

json

，并创建一个

json

文件，该文件加载良好。现在，我不知道在力定向图中，要使节点响应，需要采取哪些步骤。我需要删除和添加新节点及其链接

force.nodes(json.nodes)
    .links(json.links)
    .start();

initNodes(json);

如何在不重置整个可视化的情况下使其更加动态或更新

---

我已经多次看到这个问题没有得到回答，因此我希望有人能够发布并提供指导。

您可以在此处看到如何附加新节点和关系的示例：

摆脱节点和关系稍微复杂一些，但您可以在这里看到过程：

---

在我的D3力图中添加节点/链接非常混乱，直到我更好地理解添加初始节点集的方式

假设

是您希望用于节点的：

// Select the element where you'd like to create the force layout
var el = d3.select("#svg");

// This should not select anything
el.selectAll("g")

// Because it's being compared to the data in force.nodes() 
    .data(force.nodes())

// Calling `.enter()` below returns the difference in nodes between 
// the current selection and force.nodes(). At this point, there are
// no nodes in the selection, so `.enter()` should return 
// all of the nodes in force.nodes()
    .enter()

// Create the nodes
    .append("g")
    .attr("id", d.name)
    .classed("manipulateYourNewNode", true);

现在，让我们创建一个函数，一旦图形初始化，它将向布局中添加一个节点

newNodeData

是一个对象，其中包含要用于新节点的数据。

connectToMe

是一个字符串，包含要将新节点连接到的节点的唯一id

function createNode (newNodeData, connectToMe) {
    force.nodes().push(newNodeData);
    el.selectAll("g")
       .data(force.nodes(), function(datum, index) { return index })

.data（）

中作为可选第二个参数提供的函数将对选择中的每个节点运行一次，并对

force.nodes（）

中的每个节点运行一次，根据返回的值对它们进行匹配。如果未提供任何函数，将调用回退函数，返回

索引（如上所述）

但是，在新选择的索引（我相信顺序是随机的）和
force.nodes（）
中的顺序之间很可能会有争议。相反，您很可能需要函数返回每个节点唯一的属性

这一次，
.enter（）
将只返回您试图添加为
newData
的节点，因为
.data（）
的第二个参数找不到该节点的键

函数createLink（定义如下）在新节点和所选节点之间创建链接

另外

注意：在函数开始时调用
force.stop（）
对我来说是一个巨大的帮助，当时我第一次尝试找出如何将节点和链接添加到图形中

function createLink (from, to) {
    var source = d3.select( "g#" + from ).datum(),
        target = d3.select( "g#" + to ).datum(),
        newLink = {
            source: source,
            target: target,
            value: 1
        };
    force.links().push(newLink);

以下代码在以下假设下工作：

#links
是包含所有链接元素的包装器元素
您的链接表示为
元素：

d3.select("#links")
    .selectAll("line")
    .data(force.links())
    .enter()
    .append("line");


重要的部分是将.data方法返回的值保存在var中（比如x），并在方法末尾调用x.exit（）.remove（）。这是一个关于如何添加节点的好答案，但忘记了如何删除节点。
d3.select("#links")
    .selectAll("line")
    .data(force.links())
    .enter()
    .append("line");