在 d3中旋转 x 轴文本

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

我试过添加转换属性: . attr (“转换”，“旋转(180)”)

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

能想到我做错了什么就太好了。还需要调整 x 和 y 的位置吗？如果是这样的话，通过多少(当我能在 Firebug 中看到它的时候很难排除故障)。

95921 次浏览
小开
最佳答案

如果你设置了一个旋转变换(180) ，它旋转元素 相对于原点，而不是相对于文本锚。因此，如果您的文本元素还设置了 X和 嘿属性来定位它们，那么很可能您已经将文本旋转到了屏幕之外。例如，如果你尝试,

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

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

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

另一种选择是对 SVG 的 旋转变换使用可选的 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轴，轴标签旋转如下:

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

请注意，旋转只应用于输入选定内容。

enter image description here

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


提交答案