javascript – 使用KineticJS绘制有根的树

我正在开发一个webapp,需要动态绘制有根的n-ary树,以绘制技能之间的先决条件关系.它实际上已经这样做了,你可以看到 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]是先决条件关系的评级(影响线条粗细)

解决方法

您可以使用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',rating: 10
        }
      ]
    },{
      title: 'Skill C',url: 'http://skillc.com',rating: 1
    }
  ]
}

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

此外,如果您可以选择d3,则可以从相同的技能依赖关系数据集中创建多个不同的可视化.

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