Вращение вращения D3.js

У меня возникают проблемы, когда я пытаюсь правильно выполнить анимацию вращения, используя библиотеку D3.js. Проблема связана с точкой, в которой я хочу повернуть элемент.

Вот скрипка, которую я сделал, чтобы показать, что я имею в виду (в замедленном темпе): http://jsfiddle.net/74mCb/

Кажется, что источник проблемы лежит здесь:

.attr("transform", "rotate(-60, 150,130)");

И затем я поворачиваю его так:

.attr("transform", "rotate(40 150,130)");

Я хотел бы, чтобы прикладом иглы оставалось на месте (чтобы быть центром вращения), может кто-нибудь объяснить, что я делаю неправильно?

Спасибо!

Ответы

Ответ 1

Это немного сложно понять (я не совсем понимаю это сам), но D3 нуждается в некоторой помощи, зная, как интерполировать между двумя строками, представляющими ваше вращение.

function turnNeedle()
{

    needle
      .transition()
      .duration(2000)
      .attrTween("transform", tween);

    function tween(d, i, a) {
      return d3.interpolateString("rotate(-60, 150, 130)", "rotate(60, 150, 130)");
    }

}

d является базой данных, i является индексом, a является атрибутом в случае, если вы хотите сделать это с помощью данных.

http://jsfiddle.net/SHF2M/

Ответ 2

Здесь я думаю, что происходит: за спецификацию SVG, преобразование

rotate(40 150,130)

эквивалентно:

translate(150,130) rotate(40) translate(-150, -130)

Похоже, что D3 анимирует перевод, а также поворот - внутреннее представление d3.transform rotate(40 150,130) представляет собой компонент поворота + компонент перевода, поэтому оба включены в переход.

Самое простое исправить здесь - нарисовать иглу в начале координат, перевести ее с внешним элементом g в правильное положение, а затем повернуть ее:

var needle = svg
  .append("g")
    .attr("class", "needle")
    .attr("transform", "translate(150 , 130)")
  .append("path")
    .attr("class", "tri")
    // your path may have been prettier
    .attr("d", "M-3 0 L0 -130 L3 0 S3 5 0 5 S-3 5 -3 0 Z")
    .attr("transform", "rotate(-60)");

затем

needle
    .transition()
    .duration(2000)
    .attr("transform", "rotate(40)");

См. рабочую скрипту: http://jsfiddle.net/nrabinowitz/74mCb/1/