D3 JS - Force Graph - 删除Node后不重新启动布局

问题描述

UPDATE：
删除节点后，图表现在运行正常。
然而，当我有条件地删除非顺序节点（例如4,5,10）时，图形不显示正确的节点。

UPDATE :The graph now behaves correctly after removal of node(s).However, when I conditionally remove non-sequential nodes (e.g. 4,5,10) the graph does not display the correct nodes.

请看更新的点击处理程序（大量的调试）。
我试图删除所有的节点与d.sourcevalue ==news24，这都是大的蓝色圆圈。
虽然在删除后数组是正确的，但是显示不正确的节点。
我怀疑它与node.exit（）有关，但我不确定。

Please look at the updated click handler below (lots of debugging).I'm trying to remove all nodes with the "d.source" value == "news24", which are all the large blue circles.Although the array is correct after "removal", the incorrect nodes are being displayed.I suspect its something to do with node.exit(), but I'm not sure.

完整更新的代码：

$('#btnRemove').click(function(e) {
// These are the large blue circles  
var sourceToHide = "news24";

// DEBUG - Before Removal
for (i=0; i < nodes.length; i++) {
  console.log("node_object[" + i + "].source = " + nodes[i].source);
  console.log("-----------------------------------");
}

// Hold indices of items to remove  
var itemsToRemove = [];

// Find items with the source to remove
for (i=0; i < nodes.length; i++) {
    var nodeSource = nodes[i].source;

    console.log("Node source = " + nodeSource + " sourceToHide = " + sourceToHide);         

    if (nodeSource == sourceToHide) {
        itemsToRemove.push(i);
    }
}

// Reverse removal array - makes splice work as expected
itemsToRemove.reverse();

// Remove items
for (i=0; i < itemsToRemove.length; i++) {
    nodes.splice(itemsToRemove[i], 1);
}

// DEBUG - After Removal
for (i=0; i < nodes.length; i++) {
    console.log("node_object[" + i + "].source = " + nodes[i].source);
    console.log("-----------------------------------");
}   

// Rebind the nodes to the array
node = svg.selectAll("circle")
.data(nodes)

// Remove the exit'ed node
node.exit().remove();

// Tell the layout that this is the new set of nodes
// so that it doesn't include the old one in the computation
force
.nodes(nodes)

// That's it. No need to restart the force layout

}）;

我搜索了很多，并尝试了很多例子孤立，但无法解决这个问题为我的特定设置和数据。

I've searched a lot, and tried many examples in isolation, but could not solve this issue for my particular setup and data.

代码：

道歉，我有问题设置在JSFiddle（外部文件等），所以你可以得到完整的代码在这里：

我想要什么实现：\\
（对于此测试）我要删除单个节点，然后重绘/重新启动图

What I want to achieve:
(for this test) I want to remove a single node, and then redraw/restart the graph

我试过：\\
我已经尝试从节点数组中删除最后一个元素，然后重绘图形（圆和线），然后调用force.start（）

What I've tried:
I've attempted to remove the last element from the Array of nodes, and then redraw the graph (circles and lines) and then call force.start()

问题：

该节点根据需要消失，但整个图形停止响应。

The problem :
The node does disappear as desired, but the entire graph stops responding.

如何正确删除一个节点，然后使用正常的Drag行为成功重新启动图形。

How do I correctly remove a node and then successfully restart the graph with it normal Drag behaviour ?

注意：我在drawGraph（）函数调用force start（）

Note : I do at the end of the "drawGraph()" function call "force.start()"

感谢

推荐答案

以在这种情况下重新启动图表。所有你应该做的是从DOM中删除节点，并告诉力布局，有一组新的节点（设置为MINUS之前删除的节点）。因此，在按钮的点击处理程序中：

You don't need to "restart" the graph in this case. All you should have to do is remove the node from the DOM and tell the force layout that there's a new set of nodes (same set as before MINUS the removed one). So, in the button's click handler:

// Button Listeners
$('#btnRemove').click(function(e) {
  // Remove the node from the array
  nodes.splice((nodes.length - 1), 1);

  // Rebind the nodes to the array
  node = svg.selectAll(".node")
    .data(nodes)

  // Remove the exit'ed node
  node.exit().remove();

  // Tell the layout that this is the new set of nodes
  // so that it doesn't include the old one in the computation
  force
    .nodes(nodes)

  // That's it. No need to restart the force layout
});

这不涉及删除节点的链接行，但是您可以遵循相同的方法这样做。

This doesn't address the removal of the node's link line, but you can follow the same approach to do that.

这篇关于D3 JS - Force Graph - 删除Node后不重新启动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！