2013-03-26 39 views
2

我正在創建一個帶有d3的柱形圖。我有263個數據點,並顯示所有列使得圖表過於擁擠。爲了過濾數據點,我只需抓取每個第n項(從數組的後面開始,所以我確保我得到最新的數據點)。過濾我的數據會導致y軸搞砸

我定義Y軸的刻度值,以包括來自未過濾數據集最低和最高,所以用戶可以看到的數據集的真實 min和max。餘計算最小和最大之前予篩選數據:

var v = new Array(); 
data.forEach(function (d) { 
    d.date = parseDate(d.date); 
    d.close = +d.close; 
    v.push(d.close); // v holds ALL our values...before we filter them 
}); 
yAxisValues = [Math.min.apply(null, v),Math.max.apply(null, v)]; 

if(data.length > 100){ // make it so that the chart isn't as crowded 

     var len = data.length; 
     var n = Math.round(len/100); // ideally, we want no more than 100 items 

     var tempData = []; 
     data = data.reverse(); 

     for(var k = 0; k < len; k += n){ 

      tempData.push(data[ k ]); 
     } 
     data = tempData; 
     data = data.reverse(); 
    } 

然而,現在我的y軸被擰起來,用-0.02表示在x軸的下方。我做錯了什麼?我的fiddle。 (爲平常見到的y軸的行爲,只是註釋掉,我篩選數據的部分)的過濾之前,您正在創建你的Y軸

回答

1

,但你仍然在過濾創建規模數據:

var y = d3.scale.linear().range([height - 5, 5]); 
// here is where it look at the min/max of the filtered data rather than the min/max of the original 
y.domain(d3.extent(data, function (d) { 
    return d.close; 
})); 
var yAxis = d3.svg.axis().scale(y).orient('left').tickValues(yAxisValues); 

如果您在過濾之前移動此部分,則應該可以。

+0

這是多麼浪費時間,我浪費在這個問題上這樣一個簡單的解決方案。謝謝! – 2013-03-26 21:14:55