保持文字水平，而它的位置与d3.js旋转(Keeping text horizontal while

我试图标签添加到太阳周围的行星这个例子： http://bl.ocks.org/djvanderlaan/4953593 。到目前为止，我已经成功地添加标签，但标签的取向与它们的位置旋转，而我希望让他们的水平为读者的舒适度。我一直在寻找解决办法的开始我的问题就在这里：如何在SVG旋转过程中保持文本方向不变，但它似乎很复杂，我（我是一个新手，在三角真的不太好），并加上，它不使用d3.js. 下面是我'使用的代码：

<div id="planetarium">
</div>

<script type="text/javascript">
  var w = 800, h = 600;
  var t0 = Date.now();

  var planets = [
    { R: 300, r:  5, speed: 5, phi0: 90, name : 'Mercure'},
    { R: 150, r: 10, speed: 2, phi0: 190, name : 'Saturne'}
  ];


  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) {
      var orbit = d3.select(this).append("circle").attr("class", "orbit")
        .attr("r", d.R);
      var planet = d3.select(this).append("circle").attr("r", d.r).attr("cx",d.R)
        .attr("cy", 0).attr("class", "planet");
      var text = d3.select(this).append("text")
        .attr("x", d.R)
        .attr("y", ".31em")
        .text(function(d) { return d.name; });


  d3.timer(function() {
    var delta = (Date.now() - t0);
    planet.attr("transform", function(d) {
      return "rotate(" + d.phi0 + delta * d.speed/200 + ")";
    });
    text.attr("transform", function(d) {
      return "rotate(" + d.phi0 + delta * d.speed/200 + ")";
    });
  });
 });

</script>

这里是我的plunkr： http://plnkr.co/edit/dJEVXIeR7ly536tcMPWt?p=preview非常感谢你的帮助！

我终于发现这个例子启发的解决方案： D3.js：旋转组，保持文字相同的方向？而不是让对行星和文本两种不同的变量，我收集了他们相同的旋转组中，然后添加上的文字逆向旋转，而是集中在地球的中心，而不是容器的中心。然后，我同时设置phi0（行星在动画的开始位置）为0，这样文本将被冻结水平。这里是我的代码：

var planets = [
    { R: 300, r:  5, speed: 5, phi0: 0, name : 'Mercure'},
    { R: 150, r: 10, speed: 2, phi0: 0, name : 'Saturne'}
  ];
//... 
var container = svg.append("g")
    .attr("transform", "translate(" + w/2 + "," + h/2 + ")")

  var orbit = container.selectAll(".orbit")
                       .data(planets)
                       .enter()
                       .append("circle")
                       .attr("class", "orbit")
                       .attr("r", function(d) {return d.R;});
  var planets = container.selectAll(".planet")
                       .data(planets)
                       .enter()
                       .append("g")

    planets.append("circle")
                       .attr("class", "planet")
                       .attr("r", function(d) {return d.r;})
                       .attr("cx", function(d) {return d.R; })
                       .attr("cy", 0);


    planets.append("text")
                       .attr("dx", function(d) {return d.R;})
                       .attr("dy", ".35em")
                       .text(function(d) {return d.name});


  d3.timer(function() {
    var delta = (Date.now() - t0);
    planets.attr("transform", function(d) {
      return "rotate(" + d.phi0 + delta * d.speed/200 + ")";
    });
    planets.selectAll("text").attr("transform", function(d) {
      return "rotate(" + -1*(d.phi0 + delta * d.speed/200) + " " + d.R + " " + 0 + ")";
    });
  });

不知道这是一个很好的解决方案，但目前它的工作原理。我会好好学习三角不过，我答应;）