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);