使用 KineticJS 绘制有根树答案

【问题标题】：Drawing rooted trees with KineticJS使用 KineticJS 绘制有根树
【发布时间】：2013-01-13 11:30:41
【问题描述】：

我正在开发一个 web 应用程序，它需要动态绘制有根的 n 元树，以绘制技能之间的先决条件关系。它实际上已经这样做了，你可以看到an example here。不过，我正在尝试改进它，使用 here in PyMag 布局的算法，我必须承认，我在试图弄清楚如何将其调整为我的 JavaScript 代码时有点迷茫。

编辑：这里是 my current code，用于从 Rails ERB 部分绘制这些树（我会在此处粘贴代码，但它有点长）。

对于那些查看我的代码的人来说，gon.skills_map 是这种格式的数组：

gon.skills_map[0] 是字符串中的技能标题
gon.skills_map[1]是技能的URL，这样每个节点都可以点击
gon.skills_map[2] 是一个后置条件数组（我称之为先决条件的反面）数组，格式完全相同
gon.skills_map[3] 是先决关系的等级（影响线条粗细）

【问题讨论】：

请发布您正在使用的代码。
stackoverflow.com/questions/12327055/… 已启用，只需将您的 kineticjs 集成到其中即可。
@EliteOctagon 不幸的是，我目前的实现比那个例子更好。就像我说的那样，我已经有了这个工作——如果我能弄清楚如何合并我链接到的更好的算法，那么生成的树就不会像它们可能的那样漂亮或节省空间。
呵呵——之前的回答怎么了？
刚刚被版主删除。不知道为什么，OP 说答案看起来“非常理想”..？

标签： javascript python kineticjs n-ary-tree

【解决方案1】：

您可以使用 d3.js 数据可视化库。它比手动构建树要好得多，尤其是当图形变得更复杂时。 d3 使用 svg，因此您可以与图表进行丰富的交互，例如单击、悬停、拖动等。

您需要将图表转换为适当的数据结构，如下所示：

{
  title: 'Skill A',
  url: 'http://skilla.com',
  children: [
    {
      title: 'Skill B',
      url: 'http://skillb.com',
      rating: 3,
      children: [
        {
          title: 'Skill D',
          url: 'http://skilld.com',
          rating: 5
        }, 
        {
          title: 'Skill E',
          url: 'http://skilld.com',
          rating: 10
        }
      ]
    },
    {
      title: 'Skill C',
      url: 'http://skillc.com',
      rating: 1
    }
  ]
}

这里的评级显示了对父技能的依赖程度。我在这个小提琴http://jsfiddle.net/atrniv/y8drq/2/

中创建了一个带有d3的示例技能树

此外，如果您可以选择 d3，您可以从同一个技能依赖数据集创建多个不同的可视化。

d3 网站 - http://d3js.org/

【讨论】：