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

旋转是相对于元素的父源：

  

旋转是关于当前用户坐标系的原点。（source）

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

您可以将每个标签附加到自己的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原点旋转，每个原点都根据标签的位置定位：