我正在尝试将数据集显示为图形,但是虽然 x 和 y 轴相对于我设置的 x 和 y 比例正确显示,但图形条没有正确地绘制在 SVG 画布上。
这是显示的图表:
这是我用 CoffeeScript 编写的数据集和 svg 组件:
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)