用KineticJ绘制有根树

Question

我正在开发一个webapp，它需要动态绘制有根的n元树，以绘制技能之间的先决关系。实际上它已经这样做了，您可以看到an example here。不过，我正在尝试改进它，使用了here in PyMag的算法，我必须承认，我有点迷茫，想弄清楚如何使它适应我的JavaScript代码。在

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

对于那些确实签出我的代码的人，gon.skills_map是一个以下格式的数组：

• 在gon.skills_地图[0]是字符串中技能的标题
• 在gon.skills_地图[1] 是技能的URL，因此每个节点都是可单击的
• 在gon.skills_地图[2] 是一个postrequisite数组（我称之为prerequisite的反面）数组，格式完全相同
• 在gon.skills_地图[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/