Javascript 层次圆弧'；在D3.js中的s，它包括每个级别的值，而不仅仅是树叶的聚集

你好，Stackoverflow-

我一直在尝试使用以下提供的示例创建一个太阳暴流图： 我可以成功地复制这件特别的艺术品——然而，我试图添加一个转折点，但迄今为止没有成功。基本上，我认为我需要使用这些代码行：

var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, radius * radius])
.value(function(d) { return d.size; });

我在这条线上尝试了许多不同的变化：

.value(function(d) { return d.size; });

包括尝试将每个父级的值更改为我在JSON中发送的预定义值。本质上，我希望图表能够反映出我是如何拥有JSON的：

{
"name": "root",
"children": [
  {
    "name": "a",
    "size": 100,
    "children": [
      {
        "name": "b",
        "size": 50,
        "children": [
          {
            "name": "c",
            "size": 25
          },
          {
            "name": "d",
            "size": 15
          },
          {
            "name": "e",
            "size": 35,
            "children" : [
              {
                "name": "f",
                "size": 10
              },
              {
                "name": "g",
                "size": 5
              }
            ]
          }
        ]
      }
      ]
  }
]
}

---

正如您可能注意到的，每个父对象都包含其子对象的总和及其自身的值（设置为大小），最顶端父对象（根）的总值为100，因为（a）为100。但是，如果查看（b）为50，（e）为35，则（a）的大小中缺少15个。我甚至不知道我想做的是可能的还是可能的。如果你在上面的json中插入插件，图表将呈现，但如果你看f和g，它们代表e的100%，而实际上我希望它们只代表42%，因为e的其余部分由它自己的值加上f和g表示-感谢阅读，祝你有一个美好的一天。

我不能评论，因为代表性低，所以我必须给出一个答案。关于f和g一起代表100%，据我所知，这是d3的正常行为

我认为您应该准备JSON数据，以反映希望显示的所有部分（如果这句话有任何意义的话）

我想说的是：如果你想让f和g只代表42%，你需要一个额外的元素h，它的值是20。我不认为D3有办法自己解决这个问题。由于它是数据驱动的，D3只能可视化现有数据

编辑： 再看一遍，我会说您的数据结构不是您希望的那样。我想你需要这样的东西：

{
"name": "root",
"children": [
  {
    "name": "a",
    "size": 100,
    "children": [
      {
        "name": "b",
        "size": 75,
        "children": [
          {
            "name": "c",
            "size": 25
          },
          {
            "name": "d",
            "size": 15
          },
          {
            "name": "e",
            "size": 35,
            "children" : [
              {
                "name": "f",
                "size": 10
              },
              {
                "name": "g",
                "size": 5
              },
              {
                "name": "h",
                "size": 20
              }
            ]
          }

        ]
      },
      {
        "name":"i",
        "size":25
        }
      ]
  }
]
}

我添加了值为25的元素“I”，这样它就完成了元素“a”，如下所示：a=b+I。你说子元素的值等于父元素的值，但是在b的情况下，它似乎有3个子元素，我得到了值75（25+15+35），所以我改变了b的值，我用值25加上元素“i”，得到元素a的100。D3将拾取元素“i”并在太阳暴流中可视化，就像元素“h”一样

---

正如我在编辑之前所说的，我还添加了元素h，值为20。

Hello Ocket san:我应该澄清我的问题，因为它类似于e，我希望它包含子值以及它的“自身值”，在本例中为25，但正如您用“e”指出的那样-您需要用另一个子值填充剩余的20。我想知道我的解决方案是否必须允许d3渲染其子元素，然后在图表渲染后标记所有此类子元素以移除（因为在上面的示例中，我不希望I或h可见。）-这将是非常困难的，但我认为可能可行。谢谢我的荣幸。关于不应该可见的元素的一个想法是：也许这些元素可以指定一个特殊的css类，这使它们不可见（例如，通过将不透明度设置为0）。这可能有点不太老套：-）所以，如果我找到了解决问题的方法，有没有关于如何将答案发布的想法？所以它将显示为已回答？：-）只需自己发布答案，包括您的代码，如果它真的有效，则将其标记为已回答