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

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

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

введите описание изображения здесь

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

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

введите описание изображения здесь

Я бы хотел:

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

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


animation d3.js tree force-layout
person Kevin Marzec    schedule 24.01.2012    source источник
comment
Поразмыслив, я понял, что не хочу специально преобразовывать принудительно-направленный граф в дерево - я хочу переставить узлы так, чтобы выбранный узел был по центру, а его соединения располагались вокруг него, а их соединения вокруг них и так далее. Я думаю, что хочу явно установить все координаты узла и длину ссылок и сохранить их фиксированными.   -  person Kevin Marzec    schedule 24.01.2012
comment
Я не уверен, что понимаю намерение здесь. Его связи расположены вокруг него, а их связи вокруг них, когда вы не имеете дело с иерархической структурой, - это именно то, что делает принудительно-управляемый макет. Должны ли все узлы и ссылки оставаться видимыми после того, как я нажму кнопку?   -  person nrabinowitz    schedule 28.01.2012
comment
Возможно, у вас может быть невидимый узел с фиксированным положением посередине; и всякий раз, когда пользователь выбирает узел, вы добавляете связь (с силой намного большей, чем другие силы) между ней (невидимая середина) и выделением. (также, всякий раз, когда пользователь выбирает новый узел - необходимо удалить предыдущую ссылку)   -  person alm    schedule 14.08.2012
comment
Чтобы соединить узел, на который щелкнули, расположенный вокруг, вам нужно добавить цепочку равных сил (на этот раз отталкивающую) среди его потомков 1-го уровня (опять же, значительно больше, чем другие силы на вашем графике)   -  person alm    schedule 17.08.2012

Ответы (1)


arrow_upward
7
arrow_downward

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

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. Проблема, с которой вы столкнетесь, заключается в том, что вам нужен иерархический набор данных для макета дерева, который требует от вас преобразования данных ваших узлов и краев в массив node.children, как ожидается в иерархических макетах. Я бы сделал это так, чтобы продублировать набор данных и вручную сгладить его, но может быть более элегантное решение, о котором я не знаю.

person Elijah    schedule 06.05.2013