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个分组中的第2个（即eventA的值）：

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

并将其纳入您描述的第3组（即eventB的值，，然后 eventA）：

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

您获得的结果将与您在name和children中显示的结果等级相似，只是d3.nest会将其称为key和{{ 1}}，分别。这有点不方便，因为我相信d3的分层布局（包括包）使用values和key。但是，您可以在嵌套操作后轻松地重新映射键。

children对象也接受d3.nest函数，您可以告诉它（如何）将最低级别组中的所有值转换为单个值。例如，这将总计给定rollup组值的所有大小：

eventA

d3.pack具有单个JSON的多个层次结构

1 个答案: