軸正確顯示比例，但圖形條不正確繪製

我試圖顯示一個數據集作爲一個圖形，但雖然x和y軸正確顯示關於x和y比例我已經設置，圖形條並未在SVG畫布上正確繪製。軸正確顯示比例，但圖形條不正確繪製

這是顯示的圖形： enter image description here

這是我對數據集和SVG組件寫成的CoffeeScript：

dataset = [[1992, 1], [1994, 3], [1995, 3], [1996, 1], [1997, 3], [1998, 6], [1999, 11], [2000, 36], [2001, 37], 
     [2002, 46], [2003, 171], [2004, 442], [2005, 514], [2006, 753], [2007, 756], 
     [2008, 660], [2009, 829], [2010, 903], [2011, 4425], [2012, 1635], [2013, 8]] 

w = 800 
h = 500 
padding = 40 

xScale = d3.scale.linear() 
     .domain([d3.min(dataset, (d)-> d[0]) - 1, d3.max(dataset, (d)-> d[0]) + 1]) 
     .range([padding, w - padding * 2]) 

yScale = d3.scale.linear() 
     .domain([0, d3.max(dataset, (d)-> d[1])]) 
     .range([h - padding, padding]) 

xAxis = d3.svg.axis() 
     .scale(xScale) 
     .orient('bottom') 
     .tickFormat(d3.format("0")) 

yAxis = d3.svg.axis() 
     .scale(yScale) 
     .orient('left') 

svg = d3.select('body') 
    .append('svg') 
    .attr('width', w) 
    .attr('height', h) 

svg.selectAll('.bar') 
    .data(dataset) 
    .enter() 
    .append('rect') 
    .attr('class', 'bar') 
    .attr('x', (d)-> xScale(d[0])) 
    .attr('y', (d)-> yScale(d[0])) 
    .attr('width', (d, i)-> w/dataset.length * i) 
    .attr('height', (d)-> d * 4) 

svg.selectAll('text') 
    .data(dataset) 
    .enter() 
    .append('text') 
    .attr('x', (d)-> xScale(d[0])) 
    .attr('y', (d)-> yScale(d[1])) 

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)

來源

2013-03-07 SCS

你檢查控制檯？有錯誤：'錯誤：屬性height =「NaN」'的值無效。另外，你的其他問題在這裏：'.attr（'height'，（d） - > d * 4）'。 'd'是一個對象，所以你需要使用'd [1]'（因爲它是y值）。 – 2013-03-07 22:10:29

目前沒有控制檯錯誤。我將寬度和高度屬性分別改爲（d） - > xScale（d [0]）和（d） - > yScale（d [1]），並得到了以下結果：http://imgur.com/3Hf8Ecu – SCS 2013-03-07 22:22:24

從代碼：

.attr('width', (d, i)-> w/dataset.length * i) 
.attr('height', (d)-> d * 4)

兩者都有問題。

對於寬度，您不應該乘以i，或者甚至不得不依賴於數據。需要更類似的東西：

.attr('width', widthPerYear) // don't need a function here

widthPerYear是你需要決定的東西。從技術上講，它可以是w/dataset.length，但假定數據集長度與整個範圍相同。

身高，你需要

.attr('y', (d)-> h - yScale(d[1]))

來源

2013-03-08 01:26:18 meetamit

軸正確顯示比例，但圖形條不正確繪製

回答

相關問題