可缩放的朝阳图，以百分比为单位

Question

I'm new to D3 and I hope you can help out. I'm working on a sunburst chart divided into inner and outer layers, where inner layer represents a group and outer layers represent subgroups. Here's a working example for reference: jsfiddle.net/9gpL308y/1/ (and here's the original fiddle I used as a starting point: jsfiddle.net/j9WnB/64/)

Currently, each inner layer adds up to a number based on its categories' values in the outer layer and categories behave the same with their subcategories. What I need is for each layer to display as percentage (out of 100 that all groups on the same layer should add up to) and scale to appropriate size. Take this image for example:

image of the wanted chart

Working example would be extremely helpful. I found some topics on this problem but I couldn't get it to work with provided advice. To be honest I still don't understand fully what's going on in here (I was never good at geometry).

tl;dr: How to make sunburst chart from the fiddle above display data as percentage and have arcs scale appropriately?

Thanks.

Answer 1

There is a little to do with geometry in this case (except positioning your label, but this is what arc.centroid provides). To get your percentages you just need to divide an extent of the child node by the extent of its parent.

                var center = arc.centroid(d);
                g.append("text")
                 .attr("text-anchor", "middle")
                 .attr("transform", "translate(" + center + ")")
                 .text(function(_) {
                    if (d.parent == null)
                    {
                        return;
                    }
                    var percentage = 100 * d.dx / d.parent.dx; // that's it!
                    return d3.format(",.2f")(percentage) + "%";
                 })

Working example here: http://jsfiddle.net/9gpL308y/2/

For educational purposes you can dump all the nodes of the partition layout and then find how do they match visual picture. You can also read about those parent , dx , etc. at the documentation on partition layout: https://github.com/d3/d3-3.x-api-reference/blob/master/Partition-Layout.md