83

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

我试过添加变换属性： .attr("transform", "rotate(180)")

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

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

4

3 回答 3

174

如果您设置旋转（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>
于 2012-06-29T06:30:11.047 回答
46

无耻地从别处采摘，全归功于作者。

包含的边距仅用于显示底部边距，应增加。

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)");
于 2013-05-31T18:26:42.950 回答
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)');
  });

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

在此处输入图像描述

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

于 2016-02-17T06:43:18.457 回答