Javascript 如何旋转一组文本元素

我有把小提琴：

我创建了一组文本元素，如下所示：

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

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

我试着这样旋转：

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

我发现了一些类似的例子：

它们执行以下操作来旋转：

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

---

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

多亏了@Robert Longson，问题才得以解决

我不知道你可以绕着另一个中心点旋转。现在我的旋转函数如下所示：

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

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

---

更新的fiddle:

我想我必须先平移，然后旋转，我会尝试一下，看看我能从哪里得到你可以通过旋转（角度，x，y）围绕一个不同的中心旋转。这句话不是真的，但这会旋转一组文本元素，而不是单独旋转。如果您检查文本DOM元素，您将在每个文本元素中看到rotate

rotate（-10）

，这不适用于组。@RobertLongson很棒，它可以工作，Cyril，我的错误，乍一看它似乎只适用于组，我将编辑Cyril是对的，

rotate

单独应用于每个元素。问题是它们围绕原点旋转，这就是为什么它看起来是一种“群体行为”。请参见：如果未提供可选参数x和y，则旋转是关于当前用户坐标系的原点。