d3 js 分层边缘捆绑数据格式
d3 js Hierarchical edge bundling Data Format
我正在尝试使用分层边缘捆绑将 url 可视化到 targetURL。这些列之间需要什么类型的关系？
这里是the sample:
这是我的 code.
我收到一个错误，因为
TypeError: node.parent.children is undefined
如 Bundle Layout 的文档中所述，布局应用于 links 的数组，每个数组都有一个 source和target属性指向link两端的节点。此外，这两个节点都需要一个 parent 属性指向层次结构中的 parent 节点。
此数据（理想情况下）来自 Cluster Layout，它在捆绑 link 之前定位节点。集群布局将产生束布局所需的数据（cluster.nodes 函数 returns 节点不仅有 parent 属性 和 cluster.links returns links 与 source 和 target)。这意味着您只需要让集群布局满意就可以了。
您编写的代码存在一些问题。一般来说，与其修改数据以适应示例中的可视化 copy-pasted，更好的做法是更新各种 D3 访问器以使用您拥有的数据格式。这就是他们在那里的原因。
您从中复制的可视化在数据清理方面更加一致，因此您在那里引入了一些问题。我们将解决这些问题，但您可能应该花一些时间来解决问题。第一个问题是您记下的错误：TypeError: node.parent.children is undefined。这是因为您将到达 find 中的第 1483 行并尝试将 child 添加到不存在的列表中。我们可以继续并通过为此添加一个特定的检查来解决这个问题（尽管如前所述，您实际上应该清理它的处理方式）：
if (typeof d.children === 'undefined') {
d.children = []
}
您还添加了一个名为空字符串的根节点。这是因为在第 1481 行你调用 find 而不管子字符串的长度。通过检查调用 lastIndexOf 的 return 值，您将知道节点是否具有 parent ，在后一种情况下，将 parent 设置为 null（如 the documentation 所述，parent - parent 节点，或根节点 为空）。
一旦我们解决了这些问题，您就会开始看到 TypeError: n is undefined。这是因为您的数据不完整：您引用了不存在的节点，因此在第 1510 行添加了一个没有 target 属性 的 link，因此当您尝试捆绑 links 布局失败。这个可以暂时忽略，只需将 links 添加到存在的节点，但同样，你可能应该实际修复它而不是让它成为现实。
if (i in map) {
imports.push({ source: map[d.name], target: map[i] });
}
总而言之，阅读文档，使用调试器，不要在没有花时间理解代码的情况下copy-paste编码。
我正在尝试使用分层边缘捆绑将 url 可视化到 targetURL。这些列之间需要什么类型的关系？
这里是the sample:
这是我的 code.
我收到一个错误，因为
TypeError: node.parent.children is undefined
如 Bundle Layout 的文档中所述，布局应用于 links 的数组，每个数组都有一个 source和target属性指向link两端的节点。此外，这两个节点都需要一个 parent 属性指向层次结构中的 parent 节点。
此数据（理想情况下）来自 Cluster Layout，它在捆绑 link 之前定位节点。集群布局将产生束布局所需的数据（cluster.nodes 函数 returns 节点不仅有 parent 属性 和 cluster.links returns links 与 source 和 target)。这意味着您只需要让集群布局满意就可以了。
您编写的代码存在一些问题。一般来说，与其修改数据以适应示例中的可视化 copy-pasted，更好的做法是更新各种 D3 访问器以使用您拥有的数据格式。这就是他们在那里的原因。
您从中复制的可视化在数据清理方面更加一致，因此您在那里引入了一些问题。我们将解决这些问题，但您可能应该花一些时间来解决问题。第一个问题是您记下的错误：TypeError: node.parent.children is undefined。这是因为您将到达 find 中的第 1483 行并尝试将 child 添加到不存在的列表中。我们可以继续并通过为此添加一个特定的检查来解决这个问题（尽管如前所述，您实际上应该清理它的处理方式）：
if (typeof d.children === 'undefined') {
d.children = []
}
您还添加了一个名为空字符串的根节点。这是因为在第 1481 行你调用 find 而不管子字符串的长度。通过检查调用 lastIndexOf 的 return 值，您将知道节点是否具有 parent ，在后一种情况下，将 parent 设置为 null（如 the documentation 所述，parent - parent 节点，或根节点 为空）。
一旦我们解决了这些问题，您就会开始看到 TypeError: n is undefined。这是因为您的数据不完整：您引用了不存在的节点，因此在第 1510 行添加了一个没有 target 属性 的 link，因此当您尝试捆绑 links 布局失败。这个可以暂时忽略，只需将 links 添加到存在的节点，但同样，你可能应该实际修复它而不是让它成为现实。
if (i in map) {
imports.push({ source: map[d.name], target: map[i] });
}
总而言之，阅读文档，使用调试器，不要在没有花时间理解代码的情况下copy-paste编码。