D3: Rotating labels in the third and fourth quad in sunburst example

StackOverflow https://stackoverflow.com/questions/21393427

Domanda

I am using D3 and javascript for the first time to draw sunburst, following examples at http://bl.ocks.org/mbostock/ and http://bl.ocks.org/mbostock/4063423. The labels in the thirsd and fourth quads are upside down. I found coffee wheel example here http://www.jasondavies.com/coffee-wheel/ and tried to incorporate in my example but was unsuccessful in rotating the labels. I did found a similar post here How to properly rotate text labels in a D3 sunburst diagram, but was unable to solve the issue as one of the link is not working. 

<!DOCTYPE html>
<meta charset="utf-8">
<style>

    path {
        stroke: #fff;
        fill-rule: evenodd;
    }

    text {
        font-family: Arial, sans-serif;
        font-size: 12px;
    }

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

        var width = 1600,
        height = 1300,
        radius = Math.min(width, height) / 2;

        var x = d3.scale.linear()
        .range([0, 2 * Math.PI]);

        var y = d3.scale.linear()
        .range([0, radius]);

        var color = d3.scale.category20c();

        var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");

        var partition = d3.layout.partition()
        .value(function(d) { return d.size; });

        var arc = d3.svg.arc()
        .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
        .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
        .innerRadius(function(d) { return Math.max(0, y(d.y)); })
        .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

        d3.json("ex.json", function(error, root) {
            var g = svg.selectAll("g")
            .data(partition.nodes(root))
            .enter().append("g");

            var path = g.append("path")
            .attr("d", arc)
            .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
            .on("click", click);

            var text = g.append("text")
            .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
            .attr("x", function(d) { return y(d.y); })
            .attr("dx", "6") // margin
            .attr("dy", ".35em") // vertical-align
            .text(function(d) { return d.name; });

            function click(d) {
                // fade out all text elements
                text.transition().attr("opacity", 0);

                path.transition()
                .duration(750)
                .attrTween("d", arcTween(d))
                .each("end", function(e, i) {
                      // check if the animated element's data e lies within the visible angle span given in d
                      if (e.x >= d.x && e.x < (d.x + d.dx)) {
                          // get a selection of the associated text element
                          var arcText = d3.select(this.parentNode).select("text");
                          // fade in the text element and recalculate positions
                          arcText.transition().duration(750)
                          .attr("opacity", 1)
                          .attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
                          .attr("x", function(d) { return y(d.y); });
                      }
                });
            }
        });

        d3.select(self.frameElement).style("height", height + "px");

        // Interpolate the scales!
        function arcTween(d) {
            var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
            yd = d3.interpolate(y.domain(), [d.y, 1]),
            yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
            return function(d, i) {
                return i
                ? function(t) { return arc(d); }
                : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
            };
        }

        function computeTextRotation(d) {
            return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
        }

    </script>

ex.json

[{
 "name": "aaa",
 "size": 5000,
 "children":
    [
        {
        "name": "aaab",
        "size": 2952,
        "children": [
                  {"name": "xxx", "size": 45},
                  {"name": "xxy", "size": 29},
                  {"name": "xxz", "size": 28},
                  {"name": "xxa", "size": 4}
                  ]
        },

        {
        "name": "aaac",
        "size": 251,
        "children": [
                        {
                        "name": "ddd",
                        "size": 7,
                        "children": [
                                     {"name": "ppp", "size": 4},
                                     {"name": "qqq", "size": 2}
                                     ]
                        },
                        {"name": "xxt", "size": 4},
                        {"name": "xxu", "size": 1},
                        {"name": "xxv", "size": 1}
                     ]
        },
        {"name": "aaad","size": 222}
     ]
}][1]
È stato utile?

Soluzione

Change your computeTextRotation function to the following:

    function computeTextRotation(d) {
        var ang = (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
        return (ang > 90) ? 180 + ang : ang;
    }

And set the point of rotation to be the position of centroid of the respective arc:

   var text = g.append("text")
        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
        .attr('text-anchor', function (d) { return computeTextRotation(d) > 180 ? "end" : "start"; })
        .attr("dx", "6") // margin
        .attr("dy", ".35em") // vertical-align
        .text(function(d) { return d.name; });

Example: http://jsfiddle.net/Hm49x/

With your data: http://plnkr.co/edit/tct95toQ2IjyUkQJQPB9?p=preview

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top