使用 KineticJS 绘制有根的树

Question

我正在开发一个Web应用程序，它需要动态绘制根的n元树，以绘制技能之间的先决条件关系。它实际上已经这样做了，你可以在这里看到一个例子。不过，我正在尝试改进它，使用 PyMag 中列出的算法，我必须承认，我在试图弄清楚如何适应我的 JavaScript 代码时有点迷茫。

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

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

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

Answer 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
    }
  ]
}

此处的评级显示了对父技能的依赖程度。我在这个小提琴中创建了一个带有 d3 的示例技能树 http://jsfiddle.net/atrniv/y8drq/2/

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

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