d3 旋转文本标签

Question

我有想要旋转的文本标签。

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

评论了“转换”行我得到图 1。取消注释我得到图 2 这对我来说没有意义。

关于为什么会发生这种情况以及如何解决它的任何提示？我为此使用 d3 v3

Answer 1

为什么旋转效果不如预期是由于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)

Observalbe 上的演示：https://beta.observablehq.com/@weitinglin/d3-rotating-text-labels