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);

---

有什么建议吗？我已经为此绞尽脑汁了一段时间了…

您可以执行递归树遍历并一步一步地渲染节点。 这也意味着您的数据必须被链接，否则您将在数据集中反复搜索child，如果节点数量增加，则该数据集将无法执行

我编写了一个树遍历，用于处理多个树结构，以便渲染（在我们的示例中，是从下到上的，但遍历可以在两侧使用）。

---

不幸的是，它是用c#写的，我现在不在办公室，所以我不能发布渲染器。如果您感兴趣，我可以概述渲染器的工作原理。

我想您需要的是绘制一个通用图（不是树结构），但不知道如何布局节点和边，以使它们看起来不至于一团糟

有一些图形布局算法。其基本思想是将节点视为相互排斥的对象（如在物理学中），以便将图形扩展到最大程度

我发现这个问题非常相关：

如果你想深入挖掘，这里有一些关于这个主题的研究论文：

---

希望这有帮助

您需要某种结构来告诉它源和目标是什么。也就是说，对数据进行预处理，使元素具有

源

和

目标

属性，并将其传递给

.data（）

。我对此非常感兴趣！对于这些数据，一些预处理元素似乎是必要的……非常感谢您提供的资源！我肯定会读到这些…数据结构对我来说是非常新的，因为我是一个社交媒体的人，走了前端设计师，走了数据可视化工具…自动布局系统正是我一直在寻找的，我将非常关注它。