Question

我有这个小提琴：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+")";

更新了小提琴：https://jsfiddle.net/thatOneGuy/j0gnm5mw/4/

如何旋转一组文本元素

1 个答案: