D3 JS Axis Chart Bug

时间:2016-03-02 12:32:24

标签: d3.js charts

我的图表中有一个错误,特别是在x轴标签上。

据说,它应该出现在从csv导入的数据的月份,但是滴答声是错误的。 As you can see标签显示" dec"但数据来自一月。

这是我的功能,在用户按下切换到月度数据后加载数据:

function updateDataMonthly() {

var parseDate = d3.time.format("%d-%m-%Y").parse;

d3.select("#chart-rate-of-change svg > *").remove();

d3.csv("data/chart-rateofchangemonthly.csv",function(err,data){

//get each key of the data that is not date
//these will be our key in the key/value pair
//the values x and y will be month and the value
var testdata = Object.keys(data[0]).filter(function(k){return k!="month"})
    .map(function(k){
        return {"key":k, "values":data.map(function(d){
            return {
              //let's make this a real date
              "x":parseDate(d.month),
              "y":+d[k]
            }
        })}
})

console.log(testdata);
var i=0;
testdata[i].type = "line";
testdata[i++].yAxis = 1;
testdata[i].type = "line";
testdata[i++].yAxis = 1;
testdata[i].type = "line";
testdata[i++].yAxis = 1;
testdata[i].type = "line";
testdata[i++].yAxis = 1;
testdata[i].type = "line";
testdata[i++].yAxis = 1;
testdata[i].type = "line";
testdata[i++].yAxis = 1;
testdata[i].type = "line";
testdata[i++].yAxis = 1;

nv.addGraph(function() {
var chart = nv.models.multiChart()
    .margin({top: 30, right: 140, bottom: 50, left: 100})
    .interpolate("linear").color(d3.scale.category10().range());
    chart.xAxis.tickFormat(function(d) {
        console.log(d);
        console.log(new Date(d));
        return d3.time.format("%b")(new Date(d))
    });
    chart.useInteractiveGuideline(true);
    chart.xAxis.rotateLabels(-20);
    chart.yAxis1.tickFormat(d3.format(',f'));
    chart.yAxis1.axisLabel("Rate Of Change (ppm)")
          .showMaxMin(true);

      //chart.yAxis.axisLabel("Temperature (ºC)");        
    var hdrfmt = d3.time.format("%b");
    chart.interactiveLayer.tooltip.headerFormatter(hdrfmt);

  d3.select('#chart-rate-of-change svg')
        .datum(testdata)
        .call(chart);

      nv.utils.windowResize(chart.update);
    return chart;
});
 })
}

感谢您的帮助!

0 个答案:

没有答案