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。