使用KineticJS绘制有根的树

Question

我正在开发一个webapp,需要动态绘制有根的n-ary树,以绘制技能之间的先决条件关系.它实际上已经这样做了,你可以在这里看到一个例子.我试图改进它,使用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/