D3 JS - Force Graph - 删除Node后不重新启动布局 [英] D3 JS - Force Graph - Doesn't restart layout after removing 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.

完整更新的代码： http://www.darkness.co.za/code/graph_test_2.zip

$('#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（外部文件等），所以你可以得到完整的代码在这里：
http://darkness.co.za/code/graph_test.zip

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

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后不重新启动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！