Question

我正在开发的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]是先决条件关系的评级（影响线条粗细）

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

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

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

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

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

使用KineticJS绘制有根的树

1 个答案: