[英]d3.pack Multiple hierarchies with a single JSON
I have a JSON file which I need to use to generate three different hierarchy visualisations using d3.pack. 我有一个JSON文件,我需要使用它使用d3.pack生成三个不同的层次结构可视化。
The JSON file contains information for eventA (1 or 0) and eventB (1 or 0). JSON文件包含有关eventA(1或0)和eventB(1或0)的信息。 Each leaf also has a unique ID.
每个叶子也都有一个唯一的ID。
I need to show hierarchies as follows. 我需要显示层次结构,如下所示。 First hierarchy : Total population (if there are 10000 elements, show all 10000).
第一层级:总人口(如果有10000个元素,则显示全部10000个)。 Second hierarchy : eventA (so group all the 1s and all the 0s) Third hierarchy : eventB, subdivided by eventA values.
第二层:eventA(因此将所有1和所有0分组)第三层:eventB,由eventA值细分。
At the moment, I'm using three different multidimensional JSON files, which is not very efficient, and simply erasing the old data and creating new ones. 目前,我使用的是三个不同的多维JSON文件,它们效率不高,只是擦除旧数据并创建新数据。 However, the transitions are important for what I need to do, so it doesn't quiet cut it.
但是,过渡对于我需要做的事情很重要,因此它不会悄无声息地削减它。
Does anyone have any clue on how I can achieve this? 有人对我如何实现这一目标有任何线索吗?
I'm not looking for code, just suggestions on how I can approach the problem. 我不是在寻找代码,只是关于如何解决该问题的建议。
Here is an example of what the JSON data looks like. 这是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
}
]
}
]
}
Do you know about d3.nest
? 您知道
d3.nest
吗? That's probably what you want to use for this. 那可能就是您要用于此目的的。 In that case, you would load the data as a flat array, like
在这种情况下,您可以将数据加载为平面数组,例如
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
},
...
]
(Note, I used name1
and name2
because I didn't know what to meaningfully call those things). (请注意,我使用了
name1
和name2
因为我不知道该如何有意义地调用这些东西)。
From there, to turn it into the grouping you posted: 从那里,将其变成您发布的分组:
d3.nest()
.key(function(d) { return d.name1 })
.key(function(d) { return d.name2 })
.entries(dataset)
And to get it into the 2nd of the 3 grouping you described (ie by the value of eventA
): 并将其放入您描述的3个分组的第二个分组中(即按
eventA
的值):
d3.nest()
.key(function(d) { return d.eventA })
.entries(dataset)
And to get it into the 3rd grouping you described (ie by the value of eventB
, then by eventA
): 而要让它进入第三分组你描述的(由值即
eventB
, 然后通过 eventA
):
d3.nest()
.key(function(d) { return d.eventB })
.key(function(d) { return d.eventA })
.entries(dataset)
The results you get will be hierarchically similar to what you're showing with name
and children
, except that d3.nest
will call them key
and values
, respectively. 得到的结果在层次上与显示
name
和children
的结果类似,只是d3.nest
将它们称为key
和values
。 It's slightly inconvenient, because I believe d3's hierarchical layouts (including pack) use key
and children
. 这有点不方便,因为我相信d3的分层布局(包括pack)使用
key
和children
。 But you can easily re-map the keys after the nest operation. 但是,您可以在嵌套操作之后轻松地重新映射键。
The d3.nest
object also accepts a rollup
function where you can tell it (how) to transform all the values in the lowest-level group into a single values. d3.nest
对象还接受rollup
功能,您可以在其中告诉(如何)将最低级别组中的所有值转换为单个值。 For example, this would sum all thee sizes for a given eventA
group value: 例如,这将求和给定
eventA
组值的所有大小:
d3.nest()
.key(function(d) { return d.eventA; })
.rollup(function(values) { return d3.sum(values, function(d) { return d.size; }) })
.entries(dataset);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.