javascript - 轴按比例正确显示，但图表条未正确绘制

Question

我正在尝试将数据集显示为图形，但是虽然 x 轴和 y 轴相对于我设置的 x 和 y 比例正确显示，但图形条未绘制在 SVG Canvas 上适本地。

这是显示的图表:

这是我用 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)

Answer 1

从您的代码中:

.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]))