简体   繁体   English

如何在D3旭日形图中正确旋转文本标签

[英]How to properly rotate text labels in a D3 sunburst diagram

In the following D3 sunburst : 在下面的D3旭日:

http://jsfiddle.net/maxl/eabFC/ 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. 左边象限中的标签是颠倒的,我想对它们执行旋转,以便文本从左到右读取。

The transformation should only apply to the arcs from approximately 100 degree to 270 degree. 转换应仅适用于从大约100度到270度的弧。

Following this example: http://www.jasondavies.com/coffee-wheel/ 以下示例: http//www.jasondavies.com/coffee-wheel/

I've edited your jsfiddle here: http://tributary.io/inlet/4127332/ 我在这里编辑了你的jsfiddle: 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. 您将不得不处理您的长标签,上面的示例显示了如何进行多行。

Also note that you are using an old version of d3, it is no longer necessary to call d3.layout separately. 另请注意,您使用的是旧版本的d3,不再需要单独调用d3.layout。 Here is the link to new shiny version of d3: 这是d3新闪亮版本的链接:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM