问题描述
我在 d3.js 中有两个简单的对象,它们应该围绕视口的中心旋转(就像行星围绕太阳).
I have two simple objects in d3.js, they should be circling around the center of the viewport (like planets around the sun).
我是 d3.js 的新手,我知道我必须使用过渡,但由于行星必须一直在旋转,而不仅仅是在进入或退出时,我不知道在哪里以及如何设置过渡.
I am new to d3.js and I know that I have to use transitions but as the planets have to circle all the time and not just on enter or exit I don't know where and how to set the transition.
这是我当前的代码:
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 可以玩.
And here is a jsfiddle to play around.
推荐答案
您需要:
- 将您的行星放在以您的太阳为中心的
g
组中的g
组 - 创建一个
d3.timer
,您可以在其中旋转团体.
对于 d3.timer
的使用示例,请参见 Mike Bostocks Epicyclic Gearing 示例.使用那个例子,我把类似于你问的东西放在一起:http://bl.ocks.org/4953593
For, example of the use of d3.timer
see Mike Bostocks Epicyclic Gearing example. Using that example, I put together something similar to what you asked: http://bl.ocks.org/4953593
示例核心:
var w = 800, h = 800;
var t0 = Date.now();
var planets = [
{ R: 300, r: 5, speed: 5, phi0: 90},
{ R: 150, r: 10, speed: 2, phi0: 190}
];
var svg = d3.select("#planetarium").insert("svg")
.attr("width", w).attr("height", h);
svg.append("circle").attr("r", 20).attr("cx", w/2)
.attr("cy", h/2).attr("class", "sun")
var container = svg.append("g")
.attr("transform", "translate(" + w/2 + "," + h/2 + ")")
container.selectAll("g.planet").data(planets).enter().append("g")
.attr("class", "planet").each(function(d, i) {
d3.select(this).append("circle").attr("class", "orbit")
.attr("r", d.R);
d3.select(this).append("circle").attr("r", d.r).attr("cx",d.R)
.attr("cy", 0).attr("class", "planet");
});
d3.timer(function() {
var delta = (Date.now() - t0);
svg.selectAll(".planet").attr("transform", function(d) {
return "rotate(" + d.phi0 + delta * d.speed/200 + ")";
});
});
这篇关于如何在 d3.js 中围绕中心旋转对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,WP2