Làm thế nào để xoay một đối tượng quanh tâm trong d3.js

Question

Tôi có hai đối tượng đơn giản trong d3.js, chúng nên quay quanh tâm của khung nhìn (giống như các hành tinh xung quanh mặt trời).

Tôi mới dùng d3.js và tôi biết rằng tôi phải sử dụng chuyển tiếp nhưng khi các hành tinh phải khoanh tròn mọi lúc và không chỉ vào hoặc ra, tôi không biết vị trí và cách đặt chuyển tiếp.

Đây là mã hiện tại của tôi:

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

} 

Và đây là một jsfiddle để chơi xung quanh.

Answer 1

Bạn cần phải:

1. Nơi hành tinh của bạn trong g nhóm trong một g đó là tập trung vào mặt trời của bạn
2. Tạo một d3.timer trong đó bạn xoay nhóm của bạn.

Ví dụ: sử dụng d3.timer xem ví dụ Mike Bostocks Epicyclic Gearing. Sử dụng ví dụ đó, tôi đặt lại với nhau một cái gì đó tương tự như những gì bạn hỏi: http://bl.ocks.org/4953593

cốt lõi của ví dụ:

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

Answer 2

Tôi biết điều này có thể đến quá muộn. Nhưng tôi hy vọng điều này có thể giúp người đọc trong tương lai nếu họ cũng đang phải đối mặt với cùng một vấn đề. Tôi tạo ra fiddles và thêm một số lời giải thích ở đây, hy vọng nó có thể giúp:

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

Đây là mã:

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

}