D3.js条形图无法正确显示

Question

我正在进行d3数据可视化，但是我无法正确显示条形图。所有的单个条似乎都合并为一个巨型条。我从http://bl.ocks.org/d3noob/8952219借用了一些代码，但是尽管其中一些似乎可以正常工作，但其中一些却没有。任何帮助将不胜感激。

这是我的数据：

[![enter image description here][1]][1]

这是我的代码：

var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);


startBarChart.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")");

d3.csv("../static/data/sample.csv", function(error, 
data) {

data.forEach(function(d) {
    d.keys = +d.keys;
    d.values = +d.values;
});

x.domain(data.map(function(d) { return d.keys; }));
y.domain([0, d3.max(data, function(d) { return d.values; })]);


var startBar2010 = startBarChart.append("g").attr("class","bar2010");

startBar2010.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", "-.55em")
  .attr("transform", "rotate(-90)" );

startBar2010.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Value ($)");


startBar2010.selectAll("bar") 
            .data(data)
            .enter()
            .append("rect")
            .attr("class","city_2010")
            //.attr("width", 0)
            //.attr("height", 0)
            //.transition().duration(2000).delay(delay*1)
            .attr("x", function(d) { return x(d.keys); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(d.values); })
            .attr("height", function(d) { return height - y(d.values); 
            })
            .style("fill", "steelblue"); 

});