1

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

有什么建议么？我一直在用头撞这个有一段时间了......

4

2 回答 2

0

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

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

于 2013-07-17T04:51:18.143 回答
0

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

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

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

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

希望这可以帮助！

于 2013-07-17T05:01:34.430 回答