Переход разрушает поворот SVG

Question

Я работаю над проектом JavaScript и как часть его, пытаясь повернуть элемент пути SVG вокруг данной точки. Вот упрощенный пример файла JS:

var angle=0; 
d3.select("#canvas") 
    .append("path") 
    .attr("id", "sector") 
    .attr("fill", "red") 
    .attr("d", "M150,150 L150,50 A100,100 0 0,1 236.6,200 Z") 
    .on("click", function(){ 
    console.log("click"); 
    angle=(angle+120)%360; 
    d3.select("#sector") 
     .transition().duration(2500) //removing this line leads to a nice transform attribute in the resulting html 
     .attr("transform","rotate("+angle+",150,150)"); 
    }) 

И HTML просто:

<svg id="canvas" width="300" height="300"> 
    <circle cx="150" cy="150" r="100" stroke="blue" fill="none"/> 
</svg> 

Here вы можете найти его на JSfiddle.

Как видно из приведенного выше отрывка, все это прекрасно работает с 3-аргументной версией функции rotate, где я могу указать координаты x и y точки, которую я хочу использовать в качестве центра вращения , Полученный элемент пути получает атрибут преобразования со значением

"rotate(120,150,150)"

Если я не хочу использовать переход.

Когда я вставить строку о переходе, преобразование получает некоторые странные дополнительные вещи добавили, он выглядит как

"translate(354.9038105676658, 95.09618943233417) rotate(119.99999999999999) skewX(-3.1805546814635176e-15) scale(0.9999999999999999,0.9999999999999999)"

Я думаю, в фоне не- (0,0) -centered вращения заменяется на некоторых переводов и (0,0) -центрального вращения, так же, как вы можете это сделать в геометрии. Положение и ориентация после перехода в порядке. Однако во время преобразования элемент движется по смешному пути, в примере сектор покидает круг.

Есть ли способ подавить переход, выполняющий все эти преобразования, и применить только одно вращение без (0,0)?
Есть ли другие способы обхода?
Изменение источника преобразования для атрибута элемента пути, похоже, не сработало, но, возможно, я делал это неправильно.
Я ищу решение без CSS. Это архитектурное решение, которое я не могу отменить в проекте.
Как вы видите, D3 уже участвует в проекте, но я хотел бы использовать как можно больше дополнительных внешних библиотек.

Заранее благодарен!

Answer 1

Создайте свою дугу с центром в точке (0,0). Затем переведите его в центр круга. Затем переход d3 будет работать красиво следующим образом:

d3.select("#sector") 
    .transition().duration(2500) 
    .attr("transform","translate(150,150)rotate("+angle+")");