d3双层分区 - 相等的部分

时间:2016-09-01 14:49:03

标签: javascript d3.js charts

我使用d3尝试使用双层圆环图来显示具有相同较大部分和比例内部部分的数据。我正在处理此处显示的示例:https://bl.ocks.org/mbostock/5944371

基本上,我想要显示6个组,每个组都有一个Open和Closed值,我希望它的大小与较大的弧成比例,但我希望大弧全部保持为整体大小的1/6甜甜圈。

我在这里看到一个类似的问题没有答案:https://stackoverflow.com/questions/37195588/equal-inner-arc-angles-for-d3-bilevel-partition

我能够模拟JSON来显示我想要的效果,但很明显,如果数据发生变化则会产生偏差。以下是所有相同值的结果:image

有什么建议吗?提前谢谢。

1 个答案:

答案 0 :(得分:0)

在看了一下之后,这实际上是一个简单的解决方案。我最终提出的JSON看起来像这样:

{
  "name": "flare",
  "children": [
    {
      "name": "team1",
      "children": [
        {
          "name": "open",
          "size": 0.8
        },
        {
          "name": "closed",
          "size": 0.2
        }
      ]
    },
    ...

通过确保子项添加到相同的数量(在这种情况下为1),我可以按预期更改图表。我通过使用百分比而不是值来实现这一点,因此在形成我的JSON时,我使用了size: 0.8而不是之前的size: 8