Question

我从数据库加载json并创建一个加载正常的json文件。现在我不知道在Force-Directed Graph中使节点响应的步骤。我需要删除并添加新节点及其链接。

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

initNodes(json);

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

我已经多次看到这个问题没有得到回答所以我希望有人可以发帖并给出指导。

Answer 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");

Answer 2

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

摆脱节点和关系有点棘手，但你可以在这里看到这个过程： http://bl.ocks.org/1095795

在D3js Force Graph中添加和删除节点

2 个答案: