Question

我有多个数据集，我传递给NVD3 multiBarChart。问题是，如果某个属性与另一个属性相比缺少某些属性，则图表似乎无法正确显示堆叠模式。

假设我有一份用户每周饮酒偏好的列表：

[
    {
        userName: "Todd",
        values: [
            { 
                x: "Coffee",
                y: 32
            },
            {
                x: "Tea",
                y: 13
            },
            {
                x: "Beer",
                y: 2
            }
        ]
    },
    {
        userName: "Allison",
        values: [
            { 
                x: "Coffee",
                y: 4
            },
            {
                x: "Milk",
                y: 2
            },
            {
                x: "Sprite",
                y: 14
            }
        ]
    },
    {
        userName: "Vern",
        values: [
            { 
                x: "Water",
                y: 112
            },
            {
                x: "Gatorade",
                y: 13
            },
            {
                x: "Beer",
                y: 0
            }
        ]
    }
]

由于并非所有“用户”都拥有相同的饮品，因此图表无法在堆叠模式下正确显示。

如果我对数据进行规范化，以便每个用户都拥有相同的饮料，而之前缺少的值会获得0值，则堆叠模式将正确显示。

我正在寻找一种以编程方式规范化数据的方法，以便所有“用户”数组都具有相同的对象数。

这与此处的帖子类似：in nvd3 multibarchart, some stacks lose their colors or otherwise become invisible但是，我正在寻找一种以编程方式规范化数据的方法。

Answer 1

这不是最有效的方法，但不使用任何库，并且对于不太大的数据应该可以正常工作：

var drinks = [];
data.forEach(function(d) {
  d.values.forEach(function(e) {
    if(drinks.indexOf(e.x) == -1) drinks.push(e.x);;
  });
});

data.forEach(function(d) {
  drinks.forEach(function(drink) {
    var have = false;
    d.values.forEach(function(e) {
        if(e.x == drink) have = true;
    });
    if(!have) d.values.push({x: drink, y: 0});
  });
});

完整演示here。

具有非标准化数据的NVD3 MultiBarChart堆叠显示器

1 个答案: