在 d3 中旋转 x 轴文本答案

【问题标题】：rotate x axis text in d3在 d3 中旋转 x 轴文本
【发布时间】：2012-06-30 10:50:48
【问题描述】：

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

我尝试添加转换属性： .attr("变换", "旋转(180)")

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

任何关于我做错了什么的想法都会很棒。我还需要调整 x 和 y 位置吗？而且，如果是这样，多少（当我在 Firebug 中看到它时很难排除故障）。

【问题讨论】：

标签： text svg transform d3.js

【解决方案1】：

如果您设置旋转 (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 的 rotate transform，这样您就可以指定旋转的原点。这最终有点多余，但为了完整起见，它看起来像这样：

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

【讨论】：

好的，这是完美的。谢谢，迈克。这（几乎）完成了我需要做的所有事情。但现在的问题是如何根据变量的长度自动更改 y 位置？如果我将基线设置为：title 1。没关系。但是说下一个标题更长，我不想让它与图形重叠，而且我还想最小化 xAxis 和图形本身之间的空间。
如果我回答了您的问题，请添加一个复选框以将问题标记为已回答。如果您还有其他问题，请创建一个新问题！我想你可能会问 text-anchor 属性来设置文本对齐方式，或者可能是 dy 属性来设置文本的基线。
知道了...text-anchor='end' title1 再次感谢寻求帮助，迈克。你摇滚！

【解决方案2】：

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

margin 仅用于显示底部边距，应增加。

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

【讨论】：

【解决方案3】：

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

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 上查看此模式的其他一些可能用途。

【讨论】：