使用 nvd3 库显示单系列多条形图

Question

有谁知道我将如何将多条形图制作为单个系列？在我看到的一个工作示例中，我希望我的图表看起来如何，这个函数被用于数据。

function dataFactory(seriesNum, perSeries) {
return new d3.range(0,seriesNum).map(function(d,i) { return {
key: 'Stream ' + i,
values: new d3.range(0,perSeries).map( function(f,j) {
  return { 
           y: 10 + Math.random()*100,
           x: j
         }
})
};  
});
}

以下是我目前正在使用的代码，我还将上传一张图片，以便您看到我的标签不在位置，因为它不是单个系列。

function loadBar(){ 
$.getJSON('data5.json', function (json) {
var data1 = [];
for (var key in json) {
    if (json.hasOwnProperty(key)) {
        var item = json[key];
        data1.push({
            key: item.key,
            values: item.values
        });            
    }
}

var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
  .color(d3.scale.category10().range())
  .margin({bottom: 100})
  .transitionDuration(300)
  .delay(0)
  //.rotateLabels(45)
  ;

chart.multibar
  .hideable(true);

chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.2);

chart.xAxis
    .axisLabel("Players")
    .showMaxMin(false);

chart.yAxis
    .axisLabel('Hours Played')
    .tickFormat(d3.format('d'));

d3.select('#chart1 svg')
    .datum(data1)
   .call(chart);

nv.utils.windowResize(chart.update);

chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

return chart;
});
});
}

$(document).ready(function(){
loadBar();
});

data5.json（以防万一有人需要查看）

{
"Member1": {
    "key":"test10",
    "values": [
        {
            "x": "test10",
            "y": 20
        }
    ]
},
"Member2":{
    "key":"test9",
    "values": [
        {
            "x": "test9",
            "y": 10
        }
    ]
},
"Member3":{
    "key":"test8",
    "values": [
        {
            "x": "test8",
            "y": 4
        }
    ]
},
"Member4":{
    "key":"test7",
    "values": [
        {
            "x": "test7",
            "y": 12
        }
    ]
},
"Member5":{
    "key":"test6",
    "values": [
        {
            "x": "test6",
            "y": 30
        }
    ]
},
"Member6":{
    "key":"test5",
    "values": [
        {
            "x": "test5",
            "y": 8
        }
    ]
}
,
"Member7":{
    "key":"test4",
    "values": [
        {
            "x": "test4",
            "y": 27
        }
    ]
},
"Member8":{
    "key":"test3",
    "values": [
        {
            "x": "test3",
            "y": 17
        }
    ]
},
"Member9":{
    "key":"test2",
    "values": [
        {
            "x": "test2",
            "y": 2
        }
    ]
},
"Member10":{
    "key":"test1",
    "values": [
        {
            "x": "test1",
            "y": 55
        }
    ]
}
![enter image description here][2]}

Answer 1

多条形图的预期数据格式是一个对象数组，每个对象代表一个数据系列。在每个系列对象中，应该有一个命名该系列的键属性，以及一个包含数据点的值数组。 values 数组应该为每个条形图提供一个对象，其中包含一个分类 x 值和一个数字 y 值。

例如，如果我将它们的数据生成函数的结果“字符串化”（在减少参数后，我只得到两个数据系列，每个系列有五个条形图），它看起来像这样：

[{
    "key": "Stream0",
    "values": [{
        "x": 0,
        "y": 0.16284738584101344
    }, {
        "x": 1,
        "y": 2.370283172738109
    }, {
        "x": 2,
        "y": 0.1631208266452718
    }, {
        "x": 3,
        "y": 0.24609871793543797
    }, {
        "x": 4,
        "y": 1.5096133160633776
    }]
}, {
    "key": "Stream1",
    "values": [{
        "x": 0,
        "y": 0.12566330679904006
    }, {
        "x": 1,
        "y": 0.1321859413211272
    }, {
        "x": 2,
        "y": 1.4798247902549135
    }, {
        "x": 3,
        "y": 0.10870538273358979
    }, {
        "x": 4,
        "y": 0.16155091711225184
    }]
}]

图表如下所示：

每个系列都以不同的颜色绘制。条形图根据它们的 x 值并排分组，或者您可以切换到堆叠。

每个类别都有一个窄条的原因是因为您有 11 个不同数据系列，每个数据系列都有一个具有 不同 x 值的条.因此，对于每个 x 值，该图为 所有 并排绘制的数据系列留出了空间，即使它没有它们的数据。

您需要将所有条形图分组到一个数据系列中，并通过 x 值标识测试，或者您需要为它们提供所有相同的 x 值，并通过系列键标识测试。

我知道你已经有了第一个选项，基于your other question on the discrete bar chart function。

修改此代码以查看其他方式（11 个系列，每个系列只有一个条形）的最简单方法是告诉图表函数只为 x 使用一个常量值：

chart.x(function(d){return "test";})

有了这些，以及与您的数据相似的数据（许多系列，每个只有一个数据点），您将获得一个从条形图切换到堆积面积图的图表，如下所示：

（P.S.，您当然要删除数字格式的 tickFormat 函数，这样您就不会像这些图片中那样得到“NaN”！）