在 d3 中旋转 x 轴文本

Question

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

我已经尝试添加转换属性： .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)');
  });

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

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