d3 v4:堆叠嵌套数据?

时间:2017-03-28 23:43:15

标签: javascript d3.js

我有一堆数据可以嵌套到几个类别中,例如:

{id: 1, type: A},
{id: 2, type: A},
{id: 1, type: B},
{id: 1, type: A},
{id: 2, type: B}

将此数据嵌套在id上,为我提供了嵌套数据,其中id为关键字,values数组包含所有原始值。我需要的是一个堆叠图表,显示id 1有两个A类和一个B类出现,id 2有一个,等等。这是我使用的代码:

var nested = d3.nest()
                .key( function(d) {
                    return d.Id
                })
                .entries(data);

var stack = d3.stack()
                .keys(['A','B'])
                .offset(d3.stackOffsetExpand);

我希望这些百分比因此为stackOffsetExpand。然而,这给了我空堆栈值,可能是因为我希望堆栈函数使用的type字段隐藏在values数组中。使用.value调用的stack函数,我可以看到它所看到的数据确实是每个嵌套数组的整个数据块(即key: 1, values: [{all objects with id 1 here}])。我只是不知道如何使用该函数来告诉它开始计算type属性......

1 个答案:

答案 0 :(得分:0)

这是计算数据百分比的一种方法。我先设置密钥,然后使用nest汇总rollup函数中的值。然后,我计算了之后每个键的百分比。

var raw_data = [{id: 1, type: "A"},
{id: 2, type: "A"},
{id: 1, type: "B"},
{id: 1, type: "A"},
{id: 2, type: "B"}];

var data = d3.nest()
    .key(function(d) {return d.id;})
    .rollup(function(d) { return d.length; })
    .entries(raw_data);

    data.forEach(function(d) {
    d.percentage = d.value  / raw_data.length;
    console.log(d.key + ": " + d.percentage*100);
});

JSFiddle - https://jsfiddle.net/do4ym1L2/