D3 - 单独旋转文本

Question

我这里有一个笨蛋 - https://plnkr.co/edit/eh5DlisXGTqKt9bGtuMT?p=preview

我正在创建一个堆积条形图，它将显示几个月的趋势。

月份位于 x 轴上。

我想显示每列的类型，并在列下方显示文本并旋转 90 度。

我显示了文本，但如果我尝试旋转它，它会将所有文本作为块旋转，而不是单独旋转每个文本。

如何将每个文本块分别旋转 90 度。

this.layersBar.append('text')
  .text((d:any, i:any)=>{
    return d[i].data.type
  })
  .attr('x', (d:any, i:any)=>{
        return (i * this.width/this.data.length)+5;
    })
    .attr('y', this.height+15)
    .style('fill', 'black')
    .classed('trend-type', true)
    .style("text-anchor", "middle")
    .attr("transform", "rotate(-20)") 

}

Answer 1

旋转是相对于元素的父原点：

旋转围绕当前用户坐标系的原点。（来源）

除非指定旋转点。由于您的所有文本共享相同的坐标系（父级的坐标系g），因此它们都会一起旋转，如您所注意到的那样作为一个块。它们围绕父级的 [0,0] 旋转g，而不是围绕其锚点或与文本所在位置相关的任何点旋转。

g您可以将每个标签附加到其自己的 ，而不是直接将文本附加到图表的g。如果对这些元素中的每一个g进行变换，使其原点对应于文本位置，旋转就会变得很容易。

使用您的示例，我附加了一个g与您放置标签的位置类似的翻译：

this.layersBar.append('g')
      .attr("transform",(d:any,i:any)=> {return "translate("+(i*this.width/this.data.length+5)+","+(this.height+35)+")"; })

现在我可以附加文本（无需设置 x,y，因为 0,0 现在是我想要文本的位置）：

this.layersBar.append('g')
  .attr("transform",(d:any,i:any)=> {return "translate("+(i*this.width/this.data.length+5)+","+(this.height+35)+")"; })
  .append("text")
  .text((d:any, i:any)=>{ return d[i].data.type })
  .style('fill', 'black')
  .classed('trend-type', true)
  .style("text-anchor", "middle")
  .attr("transform", "rotate(-20)");

现在，每个标签都围绕其原点旋转g，并且每个原点根据标签应在的位置进行定位：