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

Posted 2023-02-22

【中文标题】在 D3js 力图中添加和删除节点

【英文标题】：Adding and Removing Nodes in D3js Force Graph

【发布时间】：2012-07-21 07:34:59

【问题描述】：

我正在从数据库中加载json 并创建一个可以正常加载的json 文件。现在我不知道要采取哪些步骤来使节点在力有向图中做出响应。我需要删除和添加新节点及其链接。

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

initNodes(json);

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

我已经看到这个问题几次没有得到回答，所以我希望有人可以发布并提供指导。

【参考方案1】：

向我的 D3 力图添加节点/链接非常令人困惑，直到我更好地理解了添加初始节点集的方式。

假设 <g> 是您希望用于节点的：

// 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() 中的每个节点运行一次，根据返回值匹配它们。如果未提供任何函数，则调用回退函数，该函数返回 index（如上）。

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

这一次，.enter() 只会将您尝试添加的节点返回为newData，因为.data() 的第二个参数没有找到它的键。

       .enter()
       .insert("g", "#svg")
       .attr("id", d.name)
       .classed("manipulatYourNewNode", true);

    createLink(connectToMe, newNodeData.name);

    force.start();

函数 createLink（定义如下）在您的新节点和您选择的节点之间创建一个链接。

另外，the d3js API states that force.start() should be called after updating the layout。

注意：当我第一次尝试弄清楚如何将节点和链接添加到我的图表时，在我的函数开始时调用 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 是包含所有链接元素的包装元素

您的链接表示为<line> 元素：

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

【讨论】：

关于如何添加节点的好答案，但忘记提及如何删除节点。

【参考方案2】：

您可以在此处查看如何附加新节点和关系的示例： http://bl.ocks.org/2432083

摆脱节点和关系有点棘手，但您可以在此处查看过程： http://bl.ocks.org/1095795

【讨论】：

重要的部分是将 .data 方法返回的值保存在 var（比如 x）中，并在方法结束时调用 x.exit().remove()。