在瀑布图示例上更改xaxis文本方向

Question

我正在尝试在瀑布图示例http://dimplejs.org/advanced_examples_viewer.html?id=advanced_waterfall

上定位x轴文本

在我注入的上述网页的控制台中由How to rotate x-axis text in dimple.js?激励：

myChart.axes[0].shapes.selectAll("text").attr("transform", "rotate(-45)");

导致：

可以看到轴旋转但是它们的位置已被翻译。

我可以看到我的特定用例：

有更多类别，需要旋转轴文本以防止溢出。 如何旋转轴文本（在我的情况下，我想要-90度而不是-45）并阻止产生的位置转换？

在dimplejs网站示例中我可以做

myChart.axes[0].shapes.selectAll("text")
    .attr("transform", "translate(-150, 200) rotate(-90)")

手动对齐文字：

在我的特定图表上，我需要做更多类别：

myChart.axes[0].shapes.selectAll("text")
    .attr("transform", "translate(-130, 140) rotate(-90)")

一个讨厌的黑客，其坐标需要根据数据手动更改。

Answer 1

此问题特定于我完成瀑布图示例的方式。当您调整弹出窗口大小时，您可以在this example中看到Dimple为长标签内置旋转。

不幸的是，为了处理重复的x值，我在瀑布示例中创建了x维度，它取一个整数，然后在绘制后用文本标签替换。这意味着大小调整逻辑认为只有一个数字整数并且不进行旋转。这是旋转x值的凹坑源代码：

axis.shapes.selectAll("text")
    .style("text-anchor", "end")
    .each(function () {
         var rec = this.getBBox();
         d3.select(this)
            .attr("transform", "rotate(90," + (rec.x + rec.width) + "," + (rec.y + (rec.height / 2)) + ") translate(5, 0)");
    });