Question

我从http://bl.ocks.org/mbostock/1093130开始折叠了一个很好的可折叠力布局。

以下是我的示例：http://plnkr.co/edit/rqh8SD?p=preview

当所有节点都有唯一的名称（http://plnkr.co/edit/E1n6asBM5VfX2vjGPkKO?p=preview）时，它运行良好，但是只要某些节点具有相同的名称（不幸的是我需要它），折叠就无法正常工作。

任何人都能帮我分配节点相同名称的唯一ID吗？我相信这段代码可以成功，但我不知道在哪里插入它。

node.each(function(d,i){ // use i to iterate through
  d.uniqueID = uniqueNode + i;
}

我试图在我之前的帖子D3.js Collapsible Force Layout, collapsed by default中解决此问题 - 但未成功。

任何帮助表示赞赏！

Answer 1

做这样的事情以使所有节点都是唯一的应该可行。我建议您在压平节点之后，但在将它们插入强制有向图之前执行此操作：

功能更新（d）{

var nodes = flatten(root),
    links = d3.layout.tree().links(nodes);

nodes.each(function(d, i) { d.uniqueID = i; });

// Restart the force layout.
force
    .nodes(nodes)
    .links(links)
    .start();

在这些节点上使用.data()时，您还需要更新密钥功能

  // Update nodes
  node = node.data(nodes, function(d) { return d.uniqueID; });

但是，您需要注意，如果您更改数据，您的绑定可能是错误的。如果要插入新值，那么将所有索引推迟1，可能导致您将来数据连接到错误的元素。

解决该问题的一种可能的不同方法可能是更改您的关键功能以查看直接父（或父母）的ID。

d3.js可折叠力图 - 为相同的节点

1 个答案: