D3圖表 - 數據與海量數據重疊的問題

Question

我已經使用D3圖表生成了條形圖。下面是js代碼

function renderChart(filename) { 


var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

//var formatPercent = d3.format(".0%"); 

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 



var data = [ 
    {"name": "india", "population": 120}, 
    {"name": "uk", "population": 200}, 
    {"name": "us", "population": 300}, 
    {"name": "china", "population": 50} 
]; 
    x.domain(data.map(function(d) { return d.name; })); 
    y.domain([0, d3.max(data, function(d) { return d.population; })]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Frequency"); 

    svg.selectAll("bar") 
     .data(data) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.name); }) 
     .attr("width", x.rangeBand()) 
     .attr("y", function(d) { return y(d.population); }) 
     .attr("height", function(d) { return height - y(d.population); }); 
} 

這裏被撥弄鏈路 - http://jsfiddle.net/scfx9/

在此，的杆的寬度增加和減小根據數據的大小。當我傳遞巨大的數據時，數據條會縮小，並且數據會在div大小固定時發生重疊。如何讓我的酒吧大小不變，並允許用戶使用箭頭鍵作爲例子。如果你看看你貼的例子來移動數據低於

http://bl.ocks.org/mbostock/4062085

Answer 1

，他是處理​​事件箭頭鍵：

d3.select(window).on("keydown", function() { 
    switch (d3.event.keyCode) { 
     case 37: year = Math.max(year0, year - 10); break; 
     case 39: year = Math.min(year1, year + 10); break; 
    } 
    update(); 
}); 

您的數據將需要工作一點點不同，但窗口的概念是相同的。每次按下箭頭鍵，您的處理程序將生成一個data數組，表示當前窗口進入整體數據。然後，您將綁定數組以輸入新條並退出舊條，然後您可以決定所需的過渡類型。

與您的示例相比，您的示例與您的示例的一個區別在於，他的示例在其X軸上使用了固定比例，因此他從不需要更改座標軸。在你的情況下，因爲你使用的是序數標度，並且你的值對於每個數據窗口都是不同的，你需要在你的X標度上更新域並重繪軸（如果你願意，可以在一個轉換中）。