这是我的dimple条形图(由 d3 提供支持):
var sidechart = new dimple.chart(chart_svg, data);
sidechart.setBounds(60, 30, 200, 300)
var x = sidechart.addCategoryAxis("x", "Long name");
sidechart.addMeasureAxis("y", "Measure");
sidechart.addSeries(["Short name", "Long name"], dimple.plot.bar);
sidechart.draw();
x 轴上的文本相当长,默认情况下凹坑会旋转它,以便它垂直显示。我想将其旋转 45 度。使用 d3 可以通过以下方式完成:
myAxis.attr("transform", "rotate(-45)");
不幸的是,我无法在酒窝中找到类似的方法。任何帮助将不胜感激。
一旦调用绘制方法并设置变换,您就可以获取形状:
...
sidechart.draw();
x.shapes.selectAll("text").attr("transform", "rotate(-45)");
然而,dimple 已经使用变换在刻度之间移动标签并进行旋转,因此您可能需要像这样附加变换:
...
sidechart.draw();
x.shapes.selectAll("text").attr("transform",
function (d) {
return d3.select(this).attr("transform") + " rotate(-45)";
});
我尝试了这个,它使标签偏离了我预期的位置,因此您可能需要添加翻译,但您可能需要为您自己的图表找到合适的偏移量,我在这里使用 20 作为示例:
...
sidechart.draw();
x.shapes.selectAll("text").attr("transform",
function (d) {
return d3.select(this).attr("transform") + " translate(0, 20) rotate(-45)";
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)