更改x轴的瀑布图示例文本方向

我试图在定向瀑布图例如http://dimplejs.org/advanced_examples_viewer.html?id=advanced_waterfall 更改x轴的瀑布图示例文本方向

通过How to rotate x-axis text in dimple.js?在控制台启发了上述网页我注入x轴的文字：

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

导致：

enter image description here

如可以看到的轴线旋转，但是吨继承人职位已被翻译。

我的特定使用情况下，可以看出：

enter image description here

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

在dimplejs网站实例的情况下，我可以做

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

手动对齐文本：

enter image description here

我与多个类别的特定图表我需要做的：

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

一个令人讨厌的黑客攻击需要根据数据手动更改。

来源

2014-07-17 jdharrison

您是否试过围绕'text'元素的中心而不是坐标原点旋转？ –

@LarsKotthoff我已经尝试了旋转，然后相对于父母边界框'this.parentNode.getBBox（）'进行翻译，这似乎变得非常接近我的用例（-90旋转）。 – jdharrison

好吧，在我看来，你真正想在这种情况下是改变旋转点。 –

这个问题是特定于我做瀑布图的例子。 Dimple对长标签进行了旋转构建，如调整弹出窗口的大小，您可以在this example中看到。

不幸的是，为了处理重复的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)"); 
    });

来源

2014-07-17 12:28:15

谢谢@John Kiernander完美的作品。大图书馆非常直观。 – jdharrison

更改x轴的瀑布图示例文本方向

回答

相关问题