在d3中旋转x轴文本

Question

我是d3和svg编码的新手,我正在寻找一种在图表的xAxis上旋转文本的方法.我的问题是,通常xAxis标题比条形图中的条形图宽.因此,我希望将文本旋转为在xAxis下方垂直(而不是水平)运行.

我尝试添加transform属性:.attr("transform","rotate(180)")

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

对我做错的任何想法都会很棒.我是否还需要调整x和y位置？而且,如果是这样,那么多少(当我在Firebug中看到它时难以排除故障).

Answer 1

如果设置rotate(180)的变换,则它会相对于原点旋转元素,而不是相对于文本锚点.因此,如果您的文本元素也设置了x和y属性以定位它们,则很可能您已将文本旋转到屏幕外.例如,如果你试过,

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

文本锚点位于⟨-200,100⟩.如果希望文本锚点保持在⟨200,100⟩,则可以在旋转文本之前使用变换来定位文本,从而更改原点.

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

另一种选择是使用可选的cx和cy参数来进行SVG的旋转变换,以便您可以指定旋转原点.这最终有点多余,但为了完整性,它看起来像这样:

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

Answer 2

从其他地方无耻地采摘,都归功于作者.

保证金仅包括显示底部保证金应增加.

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

Answer 3

此旋转 D3 轴标签的一个问题是每次渲染轴时都必须重新应用此逻辑。这是因为您无权访问轴用于呈现刻度和标签的输入-更新-退出选择。

d3fc 是一个组件库，它具有装饰模式，允许您访问组件使用的底层数据连接。

它可以直接替代 D3 轴，其中轴标签旋转的执行方式如下：

var axis = fc.axisBottom()
  .scale(scaleBand)
  .decorate(function(s) {
    s.enter()
        .select('text')
        .style('text-anchor', 'start')
        .attr('transform', 'rotate(45 -10 10)');
  });

请注意，旋转仅应用于输入选择。

您可以在轴文档页面上看到此模式的一些其他可能用途。