D3.js - Можно ли анимировать между направленным на силу графом и деревом узловых связей?

Question

Я использую библиотеку D3.js и смотрю демонстрацию принудительно ориентированного графа:

http://mbostock.github.com/d3/ex/force.html

Я также смотрю на дерево ссылок на узлы:

http://mbostock.github.com/d3/ex/tree.html

Я хотел бы сделать следующее:

- Начните с графика направленной силы и когда пользователь нажимает на узел, плавно анимировать его в дереве, с выбранным узлом в центре. - Затем, когда пользователь нажимает на любое пустое место на холсте, он должен оживить обратно к силовому графику.

Кто-нибудь делал что-то подобное раньше, или у вас есть какой-нибудь совет относительно лучшего подхода? Я новичок в D3.js и не знаю, поддерживается ли это даже фреймворком.

Answer 1

Что вам нужно сделать, это остановить силу и применить преобразование существующих узлов к xy, полученному из другого макета.Таким образом, ваша функция будет выглядеть следующим образом:

force.stop();
d3.selectAll("g.nodes").transtion().duration(500)
    .attr("translate","transform("+newLayoutX+","+newLayoutY+")"

Затем выполните итерацию по массиву узлов и установите значения x, y, px, py для отражения новых X иY.Это позволит вашим узлам знать текущую позицию x и y для раскладки сил при запуске force.start()

. Вы можете взглянуть на функцию plotLayout() в этом примере:

https://gist.github.com/emeeks/4588962

Однако это не зависит от второго d3.layout.Проблема, с которой вы столкнетесь, заключается в том, что вам нужен иерархический набор данных для макета дерева, который требует от вас преобразования ваших узлов и данных ребер в массив node.children, как и ожидалось в иерархических макетах.Я бы сделал это, скопировав набор данных и вручную выровняв его, но может быть более элегантное решение, о котором я не знаю.