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＃写的，我现在不在办公室，所以我不能发布渲染器。如果您有兴趣，我可以概述渲染器的工作原理。

Answer 2

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

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

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

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

希望这有帮助！

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

2 个答案: