D3 Преобразование вращения SVG-преобразования ведет себя странно

Question

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

My codepen is here: http://codepen.io/andybarefoot/pen/bwkjaN Нажатие «вращение» в левом верхнем углу показывает необычное поведение. Моя ключевая функция для вращения «группы» выглядит следующим образом:

function spinCircles() { 
     d3 
      .select("#fixedGroup") 
      .attr("transform", "translate (0, 0) rotate(0)") 
      .transition() 
      .duration(4000) 
      .attr("transform", function(d, i){ 
       return "translate (0, 0) rotate (90,"+m/2+","+m/2+")"; 
      }) 
     ; 
    } 

Я подозреваю, что сложность возникает из-за того, что я вложен SVG элементы с различными viewboxes, как я хотел, чтобы мой SVG, чтобы быть «отзывчивым». (Вы можете изменить размер окна, а диагональные линии изменят угол, чтобы продолжить выравнивание с углами экрана, в то время как круги и квадрат сохраняют одинаковое соотношение сторон.)

Код вложенных SVG выглядит следующим образом:

 var baseSVG = d3.select("body") 
      .append("svg") 
      .attr("id", "baseSVG") 
     ; 
     var stretchSVG = baseSVG 
      .append("svg") 
      .attr("id", "stretchSVG") 
      .attr("viewBox", "0 0 " + w + " " + h) 
      .attr("preserveAspectRatio", "none") 
     ; 
     var fixedSVG = baseSVG 
      .append("svg") 
      .attr("id", "fixedSVG") 
      .attr("viewBox", "0 0 " + m + " " + m) 
     ; 

Однако я также открыт по вине переспав с моим паршивым пониманием переходов передачи в d3 ...

Любой помощи с большой благодарностью!

Answer 1

Для D3 вращаться вокруг заданного центра, необходимо предоставить пользовательский tween функцию, которая может сделать использование string interpolator:

function spinCircles() { 
    d3 
    .selectAll("#fixedGroup") 
    .transition() 
    .duration(4000) 
    .attrTween("transform", function() { 
     var center = "" + m/2 + "," + m/2; 
     return d3.interpolateString("rotate(0," + center + ")", "rotate(90," + center + ")"); 
    }); 
} 

взглянуть на updated codepen для рабочего примера.