d3軌道使用變換旋轉

Question

我想知道我的數學在哪裏，或者是否有更好的方法來實現我試圖用d3完成的任務。基本上，我有一個具有給定半徑的旋轉圓圈，我想旋轉任意數量的較小的形狀，類似於此軌道示例here。但事情是我不想使用計時器，因爲我的場景涉及沿着較大圓的半徑旋轉小圓圈，並在每個圓圈之間以相同的旋轉角度旋轉。因此，例如，第一個圓將沿着半徑旋轉到315度，然後在270度旋轉，直到每一個距離相等。這是假設我有8個小圓圈，所以它們之間的角度是45度。問題是，調用旋轉角度大於180度會導致軌道發生錯誤的方向。

var dataset = [1, 2, 3, 4, 5, 6, 7, 8]; 

var width = 600, 
    height = 600, 
    rad = Math.PI/180, 
    layerRadius = 10, 
    radius = width/2, 
    step = 360/dataset.length, 
    svg = d3.select('#ecosystem') 
     .attr('width', width) 
     .attr('height', height); 

var layers = svg.selectAll('g') 
    .data(dataset) 
    .enter() 
    .append('g') 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

layers.append('circle') 
    .attr('class', 'planet') 
    .attr('cx', 0) 
    .attr('cy', -height/2) 
    .attr('r', layerRadius) 
    .attr('fill', 'none') 
    .style({ 
    'stroke': 'black', 
    'stroke-width': 1 
}); 

svg.selectAll('.planet') 
    .transition() 
    .duration(600) 
    .delay(function (d, i) { 
    return i * 120; 
}) 
.ease('cubic') 
.attr("transform", function (d, i) { 
    //angle should be 360 - step * (i + 1); 
    console.log(360 - step * (i + 1)); 
    var angle = 360 - step * (i + 1); 
    return "rotate(" + angle + ")"; 
}); 

//circle of rotation  
var c = svg.append('circle') 
    .attr('cx', width/2) 
    .attr('cy', height/2) 
    .attr('r', radius) 
    .attr('fill', 'none') 
    .style({ 
    'stroke': 'black', 
    'stroke-width': 1 
}); 

//center point 
var cp = svg.append('circle') 
    .attr('cx', width/2) 
    .attr('cy', height/2) 
    .attr('r', 1) 
    .attr('fill', 'none') 
    .style({ 
    'stroke': 'black', 
    'stroke-width': 1 
}); 

這裏的小提琴： fiddle

Answer 1

類似動畫餅圖（見例如here），您需要自定義函數吐溫 - 默認插值是不是真的適合任何徑向。幸運的是，這是相對直接的，您只需告訴D3如何插入角度，在這種情況下，這是一個簡單的數字插值。

function angleTween(d, i) { 
      var angle = 360 - ((i+1)*20); 
      var i = d3.interpolate(0, angle); 
      return function(t) { 
       return "rotate(" + i(t) + ")"; 
      }; 
     } 

然後，而不是直接指定transform，給它這個功能：

.attrTween("transform", angleTween); 

完成演示here。