如何更改此d3.js圖

Question

以下是指向d3 js圖的鏈接。

http://enjalot.com/inlet/4131006/

這裏是代碼

var w = 300, 
    h = 300, 
    padding = 31, 
    p = 10; 

var data = [{count:200,year:2008}, 
    {count:240,year:2010}, 
    {count:290,year:2009}]; 

var bar_height = d3.scale.linear() 
    .domain(d3.extent(data, function(d) { return d.count; })) // min max of count 
    .range([p,h-p]); // min max of area to plot in 


var bar_xpos = d3.scale.linear() 
    .domain(d3.extent(data, function(d) { return d.year; })) // min max of year 
    .range([p,w-p]); // min max of area to plot in 


var xAxis = d3.svg.axis() 
      .scale(bar_xpos) 
      .orient("bottom") 
      .ticks(5); //Set rough # of ticks 

var yAxis = d3.svg.axis() 
      .scale(bar_height) 
      .orient("left") 
      .ticks(5); 

var svg = d3.select("svg") 
    .attr("width", w) 
    .attr("height", h); 

svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + (h - padding) + ")") 
    .call(xAxis); 

svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(" + padding + ",0)") 
    .call(yAxis); 

svg.selectAll("rect") 
    .data(data) 
    .enter().append("rect") 
    .attr("x", function(d) { 
     return bar_xpos(d.year); }) 
    .attr("y", function(d) { 
     return h - bar_height(d.count); }) 
    .attr("width", 10) 
    .attr("height", function(d) {return bar_height(d.count); }) 
    .attr("fill", "steelblue") 

我已經能夠繪製Y軸和X軸這個圖，但他們不看correct.There一些問題 矩形線不在X軸上。 圖形上的x軸和y軸上沒有0，它以json數據中的最小值開始，並以任何方式配置軸上兩個標記之間的距離。

Answer 1

要配置您的軸，您必須修改您的比例。

var bar_height = d3.scale.linear() 
    .domain(d3.extent(data, function(d) { return d.count; })) // min max of count 
    .range([p,h-p]); // min max of area to plot in 


var bar_xpos = d3.scale.linear() 
    .domain(d3.extent(data, function(d) { return d.year; })) // min max of year 
    .range([p,w-p]); // min max of area to plot in 

d3.extent（）同時返回數據的最小值和最大值，並將其用作圖的域。由於您使用bar_height和bar_xpos來格式化您的scale，因此這些比例的最小值將爲也是是數據中的最小值。爲了解決這個問題，使用d3.max()代替，就像這樣：

var bar_height = d3.scale.linear() 
    .domain([d3.max(data, function(d) { return d.count; }), 0]) // min max of count 
    .range([p,h-p]); // min max of area to plot in 


var bar_xpos = d3.scale.linear() 
    .domain([2000, d3.max(data, function(d) { return d.year; })]) // min max of year 
    .range([p,w-p]); // min max of area to plot in 

您可以爲您bar_xpos分鐘使用0，但它沒有任何意義，如果你是今年還要因爲實際讀取你的數據將是不可能的。我在這裏用了2000分鐘。

工作示例here。

此外，在這個例子中，我格式化了你的酒吧位置排列好一點與軸。我將.attr('width', 10)替換爲.attr('width', barwidth)，並從x屬性中減去barwidth。這將使您的酒吧的右邊緣與軸的右邊緣對齊，而不是溢出邊緣。

編輯： 修改了y和height屬性。否則，圖表下方的高度是相反的。鏈接已更新。

.attr("y", function(d) { 
    return bar_height(d.count); }) 
.attr("width", barwidth) 
.attr("height", function(d) {return h - bar_height(d.count) - padding; })