javascript 在 D3js Force Graph 中添加和删除节点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11606214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding and Removing Nodes in D3js Force Graph
提问by BlitzCrank
I am loading jsonfrom database and creating a jsonfile which loads fine. Now I don't know which steps to take for making the nodes responsive in a Force-Directed Graph. I need to remove and add new nodes and their links.
我正在json从数据库加载并创建一个json加载良好的文件。现在我不知道要采取哪些步骤来使力导向图中的节点具有响应性。我需要删除和添加新节点及其链接。
force.nodes(json.nodes)
.links(json.links)
.start();
initNodes(json);
How can I make this more dynamic or update it without resetting the whole visualization?
如何在不重置整个可视化的情况下使其更加动态或更新？
I have seen this question a couple of times not being answered so I hope someone can post and give a guide.
我已经多次看到这个问题没有得到回答，所以我希望有人可以发布并提供指导。
回答by Walter Roman
Adding nodes/links to my D3 force graph was very confusing until I better understood the way I was adding the initial set of nodes.
在我更好地理解添加初始节点集的方式之前，向我的 D3 力图添加节点/链接非常令人困惑。
Assuming a <g>is what you'd like to use for your nodes:
假设 a<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);
Now let's make that function that will add a node to the layout once the graph has been initialized!
现在让我们创建一个函数，它会在图形初始化后向布局添加一个节点！
newNodeDatais an object with the data you'd like to use for your new node.
connectToMeis a string containing the unique id of a node you'd like to connect your new node to.
newNodeData是一个包含您要用于新节点的数据的对象。
connectToMe是一个字符串，其中包含您希望将新节点连接到的节点的唯一 ID。
function createNode (newNodeData, connectToMe) {
force.nodes().push(newNodeData);
el.selectAll("g")
.data(force.nodes(), function(datum, index) { return index })
The function given as the optional second argument in .data()is run once for each node in the selection and again for each node in force.nodes(), matching them up based on the returned value. If no function is supplied, a fallback function is invoked, which returns the index(as above).
作为可选的第二个参数给出的函数对选择中.data()的每个节点运行一次，并为 中的每个节点运行一次，force.nodes()根据返回值匹配它们。如果未提供函数，则调用回退函数，该函数返回index（如上）。
However, there's most likely going to be a dispute between the index of your new selection (I believe the order is random) and the order in force.nodes(). Instead you'll most likely need the function to return a property that is unique to each node.
但是，您的新选择的索引（我相信顺序是随机的）和force.nodes(). 相反，您很可能需要该函数来返回每个节点唯一的属性。
This time, .enter()will only return the node you're trying to add as newDatabecause no key was found for it by the second argument of .data().
这一次，.enter()将只返回您尝试添加的节点，newData因为.data().
.enter()
.insert("g", "#svg")
.attr("id", d.name)
.classed("manipulatYourNewNode", true);
createLink(connectToMe, newNodeData.name);
force.start();
}
The function createLink (defined below) creates a link between your new node and your node of choice.
函数 createLink（定义如下）在您的新节点和您选择的节点之间创建链接。
Additionally, the d3js API states that force.start() should be called after updating the layout.
此外，d3js API 声明应该在更新 layout 后调用 force.start()。
Note:Calling force.stop()at the very beginning of my function was a huge help for me when I was first trying to figure out how to add nodes and links to my graph.
注意：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);
The code below works under the assumptions that:
下面的代码在以下假设下工作：
#linksis the wrapper element that contains all of your link elementsYour links are represented as
<line>elements:d3.select("#links") .selectAll("line") .data(force.links()) .enter() .append("line");
#links是包含所有链接元素的包装元素您的链接表示为
<line>元素：d3.select("#links") .selectAll("line") .data(force.links()) .enter() .append("line");
回答by Elijah
You can see an example of how to append new nodes and relationships here: http://bl.ocks.org/2432083
您可以在此处查看如何添加新节点和关系的示例：http: //bl.ocks.org/2432083
Getting rid of nodes and relationships is slightly trickier, but you can see the process here: http://bl.ocks.org/1095795
摆脱节点和关系有点棘手，但你可以在这里看到这个过程：http: //bl.ocks.org/1095795
