D3 JS-强制图-删除节点后不重新启动布局 [英] D3 JS - Force Graph - Doesn't restart layout after removing Node

问题描述

更新: 现在，在删除节点后，该图可以正常运行. 但是，当我有条件地删除非顺序节点(例如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.source"值=="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

Code :
Apologies, I had issues setting it up on JSFiddle (external files etc.) so you can get the full code here : 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.

如何正确删除节点，然后以正常的拖动行为成功重新启动图?

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中删除该节点，并告诉强制布局有一组新的节点(与减去删除的节点之前的节点集相同).因此，在按钮的点击处理程序中:

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