NVD3 X軸的時間尺度錯位

林試圖建立一個折線圖nvd3圖形，但即時通訊上x軸獲取時間值不是垂直對齊的，繼承人的代碼：NVD3 X軸的時間尺度錯位

function fillData() { 

var test1 = [], 
    test2 = [], 
    test3 = []; 

var now = new Date(), 
    day = 1000*60*60*24; 

var cont = 0; 

for (var i = now - 9*day; i < now; i+=day) 
{ 

    var arr = [400,431,401,430,429,450,448,498,421,421]; 
    var arr1 = [420,415,421,410,439,430,468,448,441,421]; 
    var arr2 = [410,425,431,420,459,420,458,438,451,421]; 

    test1.push({x: i, y: arr[cont]}); 
    test2.push({x: i, y: arr1[cont]}); 
    test3.push({x: i, y: arr2[cont]}); 
    cont+=1; 

} // fin for 

return [ 
    { 
     values: test1, 
     area: true, 
     key: 'test1', 
     color: '#81BA63' 
    }, 
    { 
     values: test2, 
     area: true, 
     key: 'test2', 
     color: '#EAEAEA' 
    }, 
    { 
     values: test3, 
     area: true, 
     key: 'test3', 
     color: '#6389BA' 
    } 
    ]; 
} 

nv.addGraph(function() { 
var chart = nv.models.lineChart() 

    .margin({top: 0, bottom: 25, left: 45, right: 0}) 
    .showLegend(true) 
    .forceY([300,500]) 

chart.yAxis 
    .showMaxMin(true) 
    .tickFormat(d3.format('.02')) 

chart.xAxis 
    .showMaxMin(false) 
    .tickFormat(function(d) { return d3.time.format('%d - %b')(new Date(d)) }); 
    chart.xScale(d3.time.scale()); 


d3.select('#sources-chart-line svg') 
    .datum(fillData()) 
    .transition().duration(500) 
    .call(chart); 

nv.utils.windowResize(chart.update); 

return chart; 
});

問題截圖：http://oi57.tinypic.com/i6gq2t.jpg

在此先感謝！

來源

2014-04-03 mdv

問題是數據點（9）和軸刻度（8）的數量是不同的。 D3選擇比例尺的「代表性」蜱，它們不一定與數據點對齊。因此，您會在日期仍然正確的數據點之間發出滴答聲，但不會像數據點那樣恰好在午夜。這個固定的

一種方式是明確指定刻度值：

var data = fillData(); 
chart.xAxis 
    .tickValues(data[0].values.map(function(d) { return d.x; }));

這是有點難看，但它表明的原則，你可以重構代碼以使這些值更接近。

來源

2014-04-03 19:34:57

謝謝，我會試試這個 – mdv

現在即時獲取：未捕獲ReferenceError：未定義tickValues – mdv

沒關係，已經得到它的工作。非常感謝你的兄弟！ – mdv

NVD3 X軸的時間尺度錯位

回答

相關問題