d3.js 可折叠力图 - 将唯一 ID 分配给相同的节点

【问题标题】：d3.js collapsible force diagram - assigning unique ID's to identical nodesd3.js 可折叠力图 - 将唯一 ID 分配给相同的节点
【发布时间】：2016-01-28 11:06:01
【问题描述】：

我有一个不错的 Collapsible Force Layout，从 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 中解决这个问题 - 没有成功。

任何帮助表示赞赏！

【问题讨论】：

标签： javascript d3.js

【解决方案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。

【讨论】：