Comment faire pivoter un objet autour du centre d3.js

J'ai deux objets simples dans d3.js ils devraient être des cercles autour du centre de la fenêtre d'affichage (comme les planètes autour du soleil).

Je suis nouvelle d3.js et je sais que je dois utiliser des transitions mais comme les planètes ont de cercle, tout le temps, et pas seulement sur l'entrée ou à la sortie, je ne sais pas où et comment la transition.

Voici mon code actuel:

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; }
    });

}

Et voici une jsfiddle de jouer.

OriginalL'auteur Marc | 2013-02-14

  1. 13

    Vous avez besoin de:

    1. Place de vos planètes g groupes dans un g qui est centrée sur le soleil
    2. Créer un d3.timer dans lequel vous faites tourner votre groupe.

    Pour, par exemple de l'utilisation de d3.timer voir Mike Bostocks Planétaires Assurant L'Engrenage exemple. À l'aide de cet exemple, j'ai mis en place quelque chose de similaire à ce que vous avez demandé: http://bl.ocks.org/4953593

    De base de l'exemple:

      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 + ")";
});
});
    Génial, merci beaucoup et bienvenue à StackOverflow!
    Je sais que c'est vieux mais je suis tombé sur ce post. Est-il une raison pourquoi les <g>, ET la planète sont en rotation? J'ai fait quelques tests de rotation de la planète et seul le groupe et les résultats sont les mêmes, à l'exception d'un peu plus lent (ce qui est normal parce que j'ai coupé dans la moitié de l'effet de rotation).

    OriginalL'auteur Jan van der Laan

  2. 2

    Je sais que cela pourrait être trop tard. Mais j'espère que cela peut aider les futurs lecteurs s'ils sont aussi confrontés au même problème.
    J'ai créé des violons et ajouter quelques explications ici, j'espère que ça peut aider:

    http://www.zestyrock.com/data-visualization/d3-rotate-object-around-the-center-object-part-2/

    Voici le code:

    var start = Date.now();
var mode = 0;
var svg = d3.select("#canvas")
.append("svg")
.attr("width", 500)
.attr("height", 500);
svg.append("circle")
.attr("r", 50)
.attr("cx", 250)
.attr("cy", 250)
.attr("fill", "#e05038");
var rotateElements = svg.append("g");
rotateElements.append("circle")
.attr("r", 25)
.attr("cx", 250)
.attr("cy", 50)
.attr("fill", "#f2b632")
.attr("class", "orangeNode");
rotateElements.append("line")
.attr("x1", 250)
.attr("y1", 75)
.attr("x2", 250)
.attr("y2", 200)
.attr("class", "edge")
.attr("stroke", "grey");
d3.select("#start")
.on("click", startAnimation);
function startAnimation() {
if (mode === 0) {
d3.timer(function() {
var angle = (Date.now() - start);
var transform = function() {
return "rotate(" + angle + ", 250, 250)";
};
d3.selectAll(".orangeNode, .edge")
.attr("transform", transform);
if (mode === 0) {
return true;
} else {
return false;
}
});
mode = 1;
} else {
mode = 0;
}
}
    le lien est périmé

    OriginalL'auteur catlovespurple