旋转d3中的x轴文本

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

我尝试添加transform属性：.attr（“ transform”，“ rotate（180）”）

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

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

如果设置了transform（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的rotation转换使用可选的cx和cy参数，以便您可以指定旋转的原点。最终有点多余，但是为了完整起见，它看起来像这样：

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

无耻地从其他地方采摘，全部归功于作者。

包含的保证金仅表示应增加底部保证金。

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

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

d3fc是一个组件库，具有装饰模式，使您可以访问组件使用的基础数据联接。

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

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

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

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