NVD3堆积条形图未正确显示x轴

时间:2016-10-24 11:40:28

标签: javascript csv d3.js data-visualization nvd3.js

我正在尝试用NVd3制作堆积条形图,但不幸的是x轴没有正确显示。我想用x轴显示1999年到2014年的年份,但这就是我得到的。 Graph

似乎nvd3正在将不同年份的所有值分组在一起。

Javascript代码

var data1 = [{}], deaths = 0;

console.log(data1);
d3.csv('data/CENS-R1/ageGroups.csv', function(data) {
  for (var i = 0; i < 12; i++) {
    // setup a new entry for that age group
    data1[i] = {
      key: "1",
      values: []
    }
    var v = i * 16;
    // go through all the data
    for (var j = 0; j < data.length; j++) {
      // check if i equals the correct entries
      if (0+v <= j && j < 16+v) {
        data1[i].key = data[j].Age;
        data1[i].values.push(
            {
                "x": (new Date()).getTime(parseInt(data[j]).Year),
                "y": parseInt(data[j].Deaths)
            }
        );
      }
    }
  }
});
console.log(data1);
nv.addGraph(function() {
    var chart = nv.models.multiBarChart();

    // format x-axis
    chart.xAxis.tickFormat(function(d) { return                 d3.time.format('%Y')(new Date(d)) });

    chart.yAxis
        .tickFormat(d3.format(',.1f'));

    d3.select('#stacked-chart svg')
        .datum(data1)
        .transition()
        .duration(500)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

CSV文件示例

CENS-R1,1,1999,1999,4390 CENS-R1,1,2000,2000,4354 CENS-R1,1,2001,2001,4188

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

显然,我解析日期的功能是错误的。而不是使用"x": (new Date()).getTime(parseInt(data[j]).Year)创建新日期我使用了Date.parse()函数,而且似乎有效。

相关问题