在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>

另一种选择是使用SVG的rotate transform的可选 cx 和 cy 参数，以便您可以指定旋转原点。这最终有点多余，但为了完整性，它看起来像这样：

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

Answer 2

从elsewhere无耻地摘录，全部归功于作者。

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

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轴标签的一个问题是每次渲染轴时都必须重新应用此逻辑。这是因为您无权访问轴用于呈现刻度和标签的enter-update-exit选项。

d3fc是一个具有decorate pattern的组件库，允许您访问组件使用的下层数据连接。

它具有D3轴的替代品，其中轴标签旋转如下：

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

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

您可以在axis documentation page上看到此模式的其他一些可能用途。