Как разместить дерево с веером в d3.js?

Макет дерева просто великолепен... для деревьев. Выкладываем деревья веером. Вот два разных возможных подхода, которые я рассматриваю:

  • «упорядочить дерево» DAG, произвольно удалив ребра у любых дочерних элементов с несколькими родителями. Используйте макет дерева, чтобы решить, куда идут вершины, а затем просто добавьте ребра обратно. Недостатком этого подхода является то, что результат может быть не очень хорошо выложен. Например, легко показать дерево с разветвленной компоновкой, где перестановка порядка одноуровневых узлов делает его вложение плоским или нет.
  • сделать что-то хитрое с макетом, управляемым силой — например, взять его встраивание, а затем повернуть все дочерние узлы вниз (например, сложить китайский веер), чтобы он выглядел древовидным.

У кого-нибудь есть комментарии или советы по этой проблеме? Любой подход?

Спасибо!


person Dan Halperin    schedule 11.01.2013    source источник


Ответы (1)


Я работаю над проектом по рисованию направленных графов в JavaScript здесь: https://github.com/cpettitt/dagre. Он включает в себя несколько примеров, которые показывают, как использовать его с D3. Здесь вы можете найти демонстрации, которые должны помочь вам понять, подойдет ли этот подход к вашим потребностям или нет:

http://cpettitt.github.com/project/dagre/latest/demo/demo-d3.html

http://cpettitt.github.com/project/dagre/latest/demo/demo.html

http://cpettitt.github.com/project/dagre/latest/demo/demo-d3-large.html

person Chris Pettitt    schedule 16.01.2013
comment
Heelo, есть ли способ посмотреть демо (ссылки, кажется, мертвы)? спасибо - person VividD; 27.01.2014
comment
Извини за это. Я переместил демо в dagre-d3, который сейчас занимается рендерингом. Вы можете найти рабочие ссылки здесь: github.com/cpettitt/dagre-d3#demo - person Chris Pettitt; 27.01.2014