以百分比表示的可缩放旭日图

Question

我是 D3 的新手，希望您能帮帮忙。我正在制作分为内层和外层的旭日图，其中内层代表一个组，外层代表子组。这是一个可供参考的工作示例：jsfiddle.net/9gpL308y/1/（这是我用作起点的原始 fiddle：jsfiddle.net/j9WnB/64/ )

目前，每个内层根据其类别在外层中的值相加得出一个数字，并且类别与其子类别的行为相同。我需要的是让每一层显示为百分比（同一层上所有组的总和应为 100）并缩放到适当的大小。以此图为例：

image of the wanted chart

工作示例将非常有帮助。我找到了一些关于这个问题的主题，但我无法按照提供的建议使用它。老实说，我仍然不完全理解这里发生了什么（我从来不擅长几何）。

tl;dr：如何根据上面的 fiddle 制作旭日图以百分比形式显示数据并使弧线适当缩放？

谢谢。

Answer 1

在这种情况下与几何有一点关系（除了定位标签，但这是 arc.centroid 提供的）。要获得百分比，您只需将子节点的范围除以其父节点的范围。

                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) + "%";
                 })

这里的工作示例：http://jsfiddle.net/9gpL308y/2/

出于教育目的，您可以转储分区布局的所有节点，然后找出它们与视觉图片的匹配程度。您还可以在有关分区布局的文档中阅读有关 parent、dx 等的信息：https://github.com/d3/d3-3.x-api-reference/blob/master/Partition-Layout.md

以百分比表示的可缩放旭日图

Zoomable sunburst chart in percentages

javascript

d3.js

sunburst-diagram