如何在d3中旋转x轴文本?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (39)

我是d3和svg编码的新手,并且正在寻找一种在图表的xAxis上旋转文本的方法。我的问题是,通常xAxis标题比条形图中的条宽。所以我正在寻找旋转文本垂直运行(而不是水平)在xAxis之下。

我试着添加transform属性:.attr(“transform”,“rotate(180)”)

但是当我这样做时,文字就完全消失了。我试图增加svg画布的高度,但仍然无法查看文本。

提问于
用户回答回答于

如果设置旋转(180)的变换,它将元素相对于原点旋转,而不是相对于文本定位点。因此,如果你的文本元素也设置了xy属性来定位它们,则很可能你将文本旋转到了屏幕外。例如,如果你尝试过,

<text x="200" y="100" transform="rotate(180)">Hello!</text>

文本的锚点将在(-200,100⟩。如果你希望文本定位点保持在(200,100⟩,那么你可以在旋转它之前使用变换来定位文本,从而更改原点。

<text transform="translate(200,100)rotate(180)">Hello!</text>

另一种选择是对SVG的旋转变换使用可选的cxcy参数,以便可以指定旋转的起点。这最终有点多余,但为了完整性,它看起来像这样:

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>
用户回答回答于
var margin = {top: 30, right: 40, bottom: 50, left: 50},

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis)
     .selectAll("text")  
     .style("text-anchor", "end")
     .attr("dx", "-.8em")
     .attr("dy", ".15em")
     .attr("transform", "rotate(-65)");

扫码关注云+社区

领取腾讯云代金券