13

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

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

initNodes(json);

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

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

4

2 回答 2

15

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

假设 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);

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

newNodeData是一个对象，其中包含您要用于新节点的数据。 connectToMe是一个字符串，其中包含您要将新节点连接到的节点的唯一 ID。

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

作为可选的第二个参数 in 给出的函数对.data()选择中的每个节点运行一次，然后对 in 中的每个节点运行一次，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（定义如下）在您的新节点和您选择的节点之间创建一个链接。

此外，d3js API 声明 force.start() 应该在更新布局后调用。

注意：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);

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

  1. #links是包含所有链接元素的包装元素

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

    d3.select("#links")
    .selectAll("line")
    .data(force.links())
    .enter()
    .append("line");
于 2013-08-17T00:13:55.400 回答
7

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

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

于 2012-07-26T19:45:07.433 回答