Масштабирование щелкнутого узла на графике D3 Force Directed

Я пытаюсь применить пример Wijk Smooth Zooming фургона к графу D3, ориентированному на силу. Я работаю на котором уже работает перетаскивание+масштабирование. Однако я не знаю, как получить свою текущую позицию, чтобы сделать ее отправной точкой преобразования. У меня такая же проблема с попыткой использовать обычное преобразование.

Я также пытался просмотреть преобразование масштабирования по клику, но не знал, как примените это к силовому графу.

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


javascript d3.js zooming force-layout
person Rozgonyi    schedule 10.08.2014    source источник
comment
Предполагая, что у вас есть стандартный силовой макет, позиция целевого узла будет [d.target.x, d.target.y], где d — это данные, привязанные к ссылке.   -  person Lars Kotthoff    schedule 10.08.2014
comment
Да, я использую стандартную раскладку сил. Я понимаю, как получить цели x и y, но чтобы иметь возможность перейти туда, разве мне не нужно знать свое текущее местоположение? Как мне получить свое текущее местоположение на карте, чтобы я мог перейти от него к цели x и y?   -  person Rozgonyi    schedule 11.08.2014
comment
Как вы переходите? Если вы просто вызываете .transition().attr("transform", ...) для элемента, вам не нужно знать текущую позицию.   -  person Lars Kotthoff    schedule 11.08.2014
comment
Спасибо за ваши комментарии. Я оглянулся на то, как я переходил, и понял это. Смотрите мой ответ ниже.   -  person Rozgonyi    schedule 12.08.2014

Ответы (1)


arrow_upward
4
arrow_downward

На самом деле, я понял это на основе функции clicked в этом примере. Мое уравнение было неправильным для моей шкалы и перевода чисел. Мне нужно было получить переводные числа таким образом:

translate = [width / 2 - scale * x, height / 2 - scale * y]

Затем мне нужно было вызвать() поведение масштабирования с переходом на само поведение масштабирования, как показано ниже, с «.event» в конце, чтобы оно сработало:

svg.transition().duration(750)
   .call(zoom.translate(translate).scale(scale).event);

и не делать это неправильно, переводя svg, как я делал раньше:

svg.transition().duration(750)
   .attr("transform", translate(translate).scale(scale));
person Rozgonyi    schedule 11.08.2014