javascript - 如何在没有父/子数据结构的情况下可视化关系？

我正在处理从数据库中提取的对象数组；本质上是一个csv文件。一个示例对象是这样的：

var data = [
 {
  "name" : "blah",
  "number" : 1234,
  "associate" : 2234
 },
 {
  "name" : "blurg",
  "number" : 2234,
  "associate" : null
 },
 {
  "name" : "blarg",
  "number" : 3334,
  "associate" : null
 }
]

我想做的是在具有“关联”的对象与其适当的“父”之间画一条线或路径，尽管它没有被构造为父/子。

从概念上讲，这就是我的想法：

var diagonal = d3.svg.diagonal()
 .source(this)
 .target(dom_element_whose_number == d.associate);

var filteredData = data.filter(function(d) { return d.associate };

svg.selectAll("path")
  .data(filteredData)
  .enter()
  .append("path")
  .attr("d", diagonal);

有什么建议？我已经为此撞了一段时间...

最佳答案

您可以进行递归树遍历并逐步渲染节点。
这也意味着您的数据必须被链接，否则您将一遍又一遍地在数据集中搜索子节点，如果节点数量增加，该子节点将表现不佳。

我已经编写了一个树遍历，用于处理几个树结构以进行渲染（在我们的例子中是自下而上的-但是遍历可以在两侧使用）。
不幸的是，它是用C＃编写的，我现在不在Office中，所以我无法发布渲染器。如果您有兴趣，我可以概述渲染器的原理。