D3 физическая гравитация

Я пытаюсь создать симуляцию физической гравитации с помощью библиотеки D3, но мне не очень везет. В справочнике по API layout говорится, что физическую гравитацию можно реализовать через положительный параметр «заряд», но я не уверен, как это будет работать.

То, что я пытаюсь реализовать в данный момент, — это один элемент SVG, который содержит несколько прямоугольников с переменным весом и размером, которые растут с разной скоростью и в конечном итоге выходят из области просмотра — их веса будут определять скорость, с которой они растут. (По сути, я просто пытаюсь реализовать глобальное гравитационное притяжение за пределами верхней части окна просмотра.)

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

Заранее спасибо!


javascript d3.js physics gravity force-layout
person stephenkao    schedule 24.09.2012    source источник
comment
Является ли один элемент SVG изображением?   -  person Raju yourPepe    schedule 12.10.2012

Ответы (1)


arrow_upward
3
arrow_downward

Вот пара идей:

  1. Вы можете напрямую изменить вертикальное положение узла в обработчике событий тика:

    force.on("tick", function(e) {
    nodes.forEach(function(o, i) {
        o.y -= o.weight / 30;
     });

     node.attr("cx", function(d) { return d.x; })
         .attr("cy", function(d) { return d.y; });
});

    Вам нужно установить force.gavity(0) для этого подхода.

  2. Или вы можете использовать force.gravity: он тянет узлы к центру макета, вы можете указать трансформацию svg, чтобы сместить центр макета над окном просмотра.
person Ivan Solntsev    schedule 17.11.2012