使用变换旋转的D3轨道

我想知道数学在哪里关闭,或者是否有更好的方法来实现Im试图用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

解决方法:

与动画饼图类似(例如,参见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) + ")";
            };
        }

然后,与其直接指定转换,不如为其提供以下功能：

.attrTween("transform", angleTween);

完成演示here.

标签：animation,d3-js,javascript
来源： https://codeday.me/bug/20191122/2058365.html