轴正确显示比例,但图形条不正确绘制
问题描述:
我试图显示一个数据集作为一个图形,但虽然x和y轴正确显示关于x和y比例我已经设置,图形条并未在SVG画布上正确绘制。轴正确显示比例,但图形条不正确绘制
这是显示的图形:
这是我对数据集和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)
答
从代码:
.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]))
你检查控制台?有错误:'错误:属性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