如何在 D3 旭日形图中正确旋转文本标签 [英] How to properly rotate text labels in a D3 sunburst diagram

问题描述

在以下 D3 旭日:

http://jsfiddle.net/maxl/eabFC/

.attr("transform", function(d) {
    return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")";
});

左象限中的标签是倒置的，我想对它们进行旋转，以便文本从左到右阅读.

The labels in the left quadrants are upside down, I would like to perform a rotation on them so that the text reads from left to right.

转换应该只适用于从大约 100 度到 270 度的弧.

The transformation should only apply to the arcs from approximately 100 degree to 270 degree.

推荐答案

如下示例:http:///www.jasondavies.com/coffee-wheel/

我在这里编辑了你的 jsfiddle:http://tributary.io/inlet/4127332/

I've edited your jsfiddle here: http://tributary.io/inlet/4127332/

你将不得不处理你的长标签，上面的例子展示了如何做多行.

You are going to have to deal with your long labels and the above example shows how to do multi-line.

另外请注意，您使用的是旧版本的 d3，不再需要单独调用 d3.layout.这是 d3 的新闪亮版本的链接:

Also note that you are using an old version of d3, it is no longer necessary to call d3.layout separately. Here is the link to new shiny version of d3:

 <script src="http://d3js.org/d3.v3.js"></script>

这篇关于如何在 D3 旭日形图中正确旋转文本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！