Question

我是D3的新手，我希望你能提供帮助。我正在研究一个分为内层和外层的旭日形图，其中内层代表一组，外层代表子组。这是一个可供参考的工作示例：jsfiddle.net/9gpL308y/1/（这里是我用作起点的原始小提琴：jsfiddle.net/j9WnB/64 /）

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

image of the wanted chart

工作示例非常有用。我发现了一些关于这个问题的主题，但我无法使用提供的建议。说实话，我仍然不完全理解这里发生了什么（我从不擅长几何学）。

tl;博士：如何从上面的小提琴中制作旭日形图，以百分比形式显示数据并使弧度适当缩放？

感谢。

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

可缩放的旭日图表百分比

1 个答案: