我正在开发的webapp需要动态绘制有根的n-ary树,以确定技能之间的先决条件关系。它实际上已经这样做了,你可以看到an example here。我试图改进它,使用here in PyMag列出的算法,我必须承认,我有点失去了试图找出如何使其适应我的JavaScript代码。
编辑:这是my current code用于绘制这些树,来自Rails ERB部分(我会在这里粘贴代码,但它有点冗长)。
对于那些检查我的代码的人,gon.skills_map
是这种格式的数组:
答案 0 :(得分: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',
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/