在d3中旋转x轴文本

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

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

但是当我这样做的时候，文字就完全消失了。 我试图增加svgcanvas的高度，但仍然无法查看文本。

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

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

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

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)'); }); 

请注意，旋转仅适用于inputselect。

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