d3旋转文字标签

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了d3旋转文字标签相关的知识,希望对你有一定的参考价值。

我有文字标签,我想旋转。

  in_years.selectAll(".xlabel")     
      .data(xTickLabels)
      .enter()
      .append("text")
      .attr("class","xlabel")
      .attr("text-anchor", "end") 
      //.attr("transform", "translate(0,0) rotate(-45)")
      .attr("font-size", "14px")
      .attr("x", (d,i) => xScale(xRange[i]))
      .attr("y", (d,i) => height+15)
      .text(function(d) { console.log(d);return d})
      ;

Wit“transform”一行评论我得到图1.取消注释我获得的图2,这对我来说没有意义。

有关为何会发生这种情况以及如何解决这个问题的任何提示我正在使用d3 v3这个enter image description here

enter image description here

答案

为什么旋转效果不像你期望的那样是由于rotate()的css属性。 link

根据MDN doc中的rotate函数定义: ''旋转轴穿过原点''

因此,您必须翻译每个文本元素的(x,y),以使旋转轴与图形中的站点相关。

// this code, which each text will rotate according to (0,0)
svg.selectAll('text.norotation')
   .data(data)
   .enter()
   .append('text')
   .text((d)=>d)
   .classed('norotation', true)
   .attr('fill', 'black')
   .attr('x', (d,i)=> xScale(i))
   .attr('y', 200)

修改一个

//each text element will rotate according to its position
svg.selectAll('text.rotation')
   .data(data)
   .enter()
   .append('text')
   .text((d)=>d)
   .classed('rotation', true)
   .attr('fill', 'black')
   .attr('transform', (d,i)=>{
        return 'translate( '+xScale(i)+' , '+220+'),'+ 'rotate(45)';})
   .attr('x', 0)
   .attr('y', 0)

关于Observable的演示:qazxsw poi

以上是关于d3旋转文字标签的主要内容,如果未能解决你的问题,请参考以下文章

如何在 D3 图表的标签中包含换行符?

react球形文字旋转标签

从 json 数据名称属性将 Y 轴标签添加到 D3 条

如何在不改变坐标的情况下转换(旋转)svg文本元素?

带有片段的 ActionBar 选项卡旋转

D3.js学习