javascript - 如何旋转一组文本元素

Question

我有这个 fiddle :https://jsfiddle.net/thatOneGuy/j0gnm5mw/1/

我有一组这样创建的文本元素:

var text = container.append('g').selectAll('text');

text.data(testData).enter()
  .append('text')
  .attr('x', function(d, i) {
    return (i + 1) * 100;
  })
  .attr('y', 100)
  .text(function(d) {
    return d.label;
  })

我尝试像这样旋转:

.attr("transform", "rotate(-10)");

我找到了几个类似的例子:

http://bl.ocks.org/mbostock/4403522

他们执行以下操作来轮换:

.selectAll("text")
    .attr("y", 0)
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("transform", "rotate(90)")
    .style("text-anchor", "start");

然而，这仍然给出相同的输出。

Answer 1

感谢@Robert Longson，问题已经解决。

我没有意识到您可以围绕不同的中心点旋转。所以现在我的旋转功能看起来像这样:

  var thisX = (i + 1) * 100, thisY = 100 ;
  return "rotate(-90," + thisX + ","+ thisY+")";

更新 fiddle :https://jsfiddle.net/thatOneGuy/j0gnm5mw/4/