在d3中旋转x轴文本
在d3中旋转x轴文本
提问于 2012-06-29 04:56:17
我是d3和svg编码的新手，正在寻找一种在图表的xAxis上旋转文本的方法。我的问题是，xAxis标题通常比条形图中的条形图更长。因此，我希望旋转文本，使其在xAxis下垂直(而不是水平)运行。
我尝试添加transform属性：.attr("transform"，"rotate(180)")
但是当我这样做的时候，文本就完全消失了。我尝试增加svg画布的高度，但仍然无法查看文本。
如果你觉得我做错了什么，那就太好了。我还需要调整x和y位置吗？以及，如果是，按多少(当我可以在Firebug中看到它时，很难进行故障排除)。
回答 2
Stack Overflow用户
发布于 2013-06-01 02:26:43
厚颜无耻地从elsewhere上摘取，都归功于作者。
包含的边距仅用于显示底部边距，应增加边距。
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)");Stack Overflow用户
发布于 2016-02-17 14:43:18
旋转D3轴标签的一个问题是，每次渲染轴时都必须重新应用此逻辑。这是因为您无法访问轴用于渲染记号和标签的enter-update-exit选择。
d3fc是一个组件库，它有一个decorate pattern，允许您访问组件使用的底层数据连接。
它有一个替代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选择。
您可以在axis documentation page上看到此模式的其他一些可能的用法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11252753
复制相关文章
相似问题