首页 文章

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

提问于
浏览 次
0

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

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

image of the wanted chart

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

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

谢谢 .

javascript d3.js sunburst-diagram

1 回答

  • 0

    在这种情况下，几何与几何有关（除了定位标签，但这是 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

    回复于

相关问题