在d3中旋转x轴文本

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

我试着添加transform属性:.attr(“transform”,“rotate(180)”)

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

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

如果设置旋转(180)的变换,它将元素相对于原点旋转,而不是相对于文本定位点。 因此,如果您的文本元素也设置了xy属性来定位它们,则很可能是将文本旋转到了屏幕外。 例如,如果你尝试,

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

文本锚将在-200,100⟩。 如果您希望文本定位点保持在⟩200,100⟩,则可以在旋转文本之前使用变换来定位文本,从而更改原点。

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

另一个select是使用可选的cxcy参数来SVG的旋转变换 ,以便您可以指定旋转的起点。 这最终有点多余,但为了完整性,它看起来像这样:

 <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轴的替代品,在这里轴标签旋转的执行方式如下:

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

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

在这里输入图像说明

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