How to properly rotate text labels in a D3 sunburst diagram

北战南征 提交于 2019-12-02 00:52:12

问题


In the following D3 sunburst :

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.


回答1:


Following this example: http://www.jasondavies.com/coffee-wheel/

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.

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>


来源:https://stackoverflow.com/questions/13958929/how-to-properly-rotate-text-labels-in-a-d3-sunburst-diagram

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!