私は d3.js に 2 つの単純なオブジェクトを持っています。それらはビューポートの中心を回っているはずです (太陽の周りの惑星のように)。
私は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があります。