Рисование корневых деревьев с помощью KineticJS

Question

Я разрабатываю веб-приложение, которое должно динамически рисовать корневые n-арные деревья, чтобы наметить обязательные отношения между навыками. Это на самом деле уже делает это, и вы можете увидеть пример здесь. Я пытаюсь улучшить его, хотя, используя алгоритм, изложенный здесь в PyMag, и должен признать, что я немного растерялся, пытаясь понять, как адаптировать его для моего кода JavaScript.

РЕДАКТИРОВАТЬ: Вот мой текущий код для рисования этих деревьев, из части ERB Rails (я бы вставил код здесь, но это немного долго).

Для тех, кто проверяет мой код,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/