d3.pack使用单个JSON的多个层次结构

Question

我有一个JSON文件，我需要使用它使用d3.pack生成三个不同的层次结构可视化。

JSON文件包含有关eventA（1或0）和eventB（1或0）的信息。 每个叶子也都有一个唯一的ID。

我需要显示层次结构，如下所示。 第一层级：总人口（如果有10000个元素，则显示全部10000个）。 第二层：eventA（因此将所有1和所有0分组）第三层：eventB，由eventA值细分。

目前，我使用的是三个不同的多维JSON文件，它们效率不高，只是擦除旧数据并创建新数据。 但是，过渡对于我需要做的事情很重要，因此它不会悄无声息地削减它。

有人对我如何实现这一目标有任何线索吗？

我不是在寻找代码，只是关于如何解决该问题的建议。

这是JSON数据的示例。

{
  "name":"Total",
  "children":[
    {
      "name":"POPULATION (n=20)",
      "children":[
        {
          "id":1,
          "eventA":1,
          "eventB":1,
          "size":50
        },
        {
          "id":2,
          "eventA":1,
          "eventB":1,
          "size":49
        },
        {
          "id":3,
          "eventA":1,
          "eventB":1,
          "size":48
        },
        {
          "id":4,
          "eventA":1,
          "eventB":1,
          "size":47
        },
        {
          "id":5,
          "eventA":1,
          "eventB":0,
          "size":46
        },
        {
          "id":6,
          "eventA":0,
          "eventB":1,
          "size":45
        },
        {
          "id":7,
          "eventA":0,
          "eventB":1,
          "size":44
        },
        {
          "id":8,
          "eventA":0,
          "eventB":1,
          "size":43
        },
        {
          "id":9,
          "eventA":0,
          "eventB":1,
          "size":42
        },
        {
          "id":10,
          "eventA":0,
          "eventB":0,
          "size":41
        },
        {
          "id":11,
          "eventA":0,
          "eventB":0,
          "size":40
        },
        {
          "id":12,
          "eventA":0,
          "eventB":0,
          "size":39
        },
        {
          "id":13,
          "eventA":0,
          "eventB":0,
          "size":38
        },
        {
          "id":14,
          "eventA":0,
          "eventB":0,
          "size":37
        },
        {
          "id":15,
          "eventA":0,
          "eventB":0,
          "size":36
        },
        {
          "id":16,
          "eventA":0,
          "eventB":0,
          "size":35
        },
        {
          "id":17,
          "eventA":0,
          "eventB":0,
          "size":34
        },
        {
          "id":18,
          "eventA":0,
          "eventB":0,
          "size":33
        },
        {
          "id":19,
          "eventA":0,
          "eventB":0,
          "size":32
        },
        {
          "id":20,
          "eventA":0,
          "eventB":0,
          "size":31
        }
      ]
    }
  ]
}

Answer 1

您知道d3.nest吗？ 那可能就是您要用于此目的的。 在这种情况下，您可以将数据加载为平面数组，例如

var flatData = [
  {
    "name1": "Total",
    "name2": "POPULATION (n=20)",
    "id": 1,
    "eventA": 1,
    "eventB": 1,
    "size": 50
  },
  {
    "name1": "Total",
    "name2": "POPULATION (n=20)",
    "id": 2,
    "eventA": 1,
    "eventB": 0,
    "size": 49
  },
  {
    "name1": "Total",
    "name2": "POPULATION (n=20)",
    "id": 3,
    "eventA": 0,
    "eventB": 1,
    "size": 48
  },
  ...
]

（请注意，我使用了name1和name2因为我不知道该如何有意义地调用这些东西）。

从那里，将其变成您发布的分组：

d3.nest()
  .key(function(d) { return d.name1 })
  .key(function(d) { return d.name2 })
  .entries(dataset)

并将其放入您描述的3个分组的第二个分组中（即按eventA的值）：

d3.nest()
  .key(function(d) { return d.eventA })
  .entries(dataset)

而要让它进入第三分组你描述的（由值即eventB ， 然后通过 eventA ）：

d3.nest()
  .key(function(d) { return d.eventB })
  .key(function(d) { return d.eventA })
  .entries(dataset)

得到的结果在层次上与显示name和children的结果类似，只是d3.nest将它们称为key和values 。 这有点不方便，因为我相信d3的分层布局（包括pack）使用key和children 。 但是，您可以在嵌套操作之后轻松地重新映射键。

d3.nest对象还接受rollup功能，您可以在其中告诉（如何）将最低级别组中的所有值转换为单个值。 例如，这将求和给定eventA组值的所有大小：

d3.nest()
  .key(function(d) { return d.eventA; })
  .rollup(function(values) { return d3.sum(values, function(d) { return d.size; }) })
  .entries(dataset);