使用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数组。 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”！）