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

Wit＆＃34;转换＆＃34; line评论我得到图1.取消注释该行我得到的图2对我来说没有意义。

有关为何会发生这种情况及如何解决的任何提示？我正在使用d3 v3来实现此

Answer 1

为什么旋转效果不符合您的期望是由于rotate（）的css属性。 link

根据MDN doc中的旋转功能定义：
＆＃39;＆＃39; 旋转轴穿过原点＆＃39;＆＃39;

所以你必须翻译每个文本元素＆＃39; s（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