我在d3.js中有两个简单对象,它们应该围绕视口中心(如太阳周围的行星)旋转。如何在d3.js中围绕中心旋转对象
我是d3.js的新手,我知道我必须使用转换,但是因为行星必须始终循环,而不仅仅是进入或退出,我不知道在哪里以及如何设置转场。
这里是我当前的代码:
var planets = [
{d:100,r:2},
{d:150,r:4}
];
var w = 500, h = 400, svg, circle;
function init(){
svg = d3.select("#drawArea").append("svg").attr({width: w, height: h});
var center = {
x: Math.floor(w/2),
y: Math.floor(h/2)
};
svg.append('circle').attr({
'cx': center.x,
'cy': center.y,
'r': 10,
'class': 'sun'
});
circle = svg.selectAll(".planet")
.data(planets)
.enter()
.append("circle")
.attr("class", "planet")
.attr("r", function(s){return s.r});
circle.attr({
// distance from the center
'cx': function(s){ return center.x - s.d; },
// center of the screen
'cy': function(s){ return center.y; }
});
}
这里是一个jsfiddle打转转。
真棒,非常感谢你,并欢迎计算器! – Marc 2013-02-15 00:04:52
我知道这是旧的,但我碰到这个职位。为什么和这个星球在旋转?我做了一些只旋转星球的测试,只有组和结果是一样的,除了慢一点(这是正常的,因为我削减了一半的旋转效果)。 –
vIceBerg
2016-12-03 15:35:59