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

Question

我正在处理从数据库中提取的一组对象；本质上是一个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);

有什么建议吗？我一直在努力解决这个问题......

Answer 1

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

我写了一个树遍历，我用它来处理几个树结构以渲染（在我们的例子中是自下而上 - 但遍历可以在两边都使用）。 不幸的是，它是用 c# 编写的，我现在不在 Office，所以我不能发布渲染器。如果您有兴趣，我可以概述渲染器的工作原理。

Answer 2

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

那里有一些图形布局算法。基本思想是将节点视为相互排斥的对象（就像在物理学中一样），以便将图形扩展到可能的最大范围。

我发现这个 SO 问题相关： Graph auto-layout algorithm

如果您想深入挖掘，这里有一些关于该主题的研究论文： https://graphics.stanford.edu/wikis/cs448b-12-fall/Graph_Layout_and_Network_Analysis

希望这会有所帮助！