D3 barchart not populating.

Question

我正在尝试使用D3创建一个条形图。但是，条形图没有填充。以下是我的代码：

 var data = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()]
var height = 900 
var width = 600 
var x = d3.scale.linear()
    .range([0, width])
    .domain([0, d3.max(data)])
var y = d3.scale.linear()
    .range([height, 0])
    .domain([0, 500])
var svg = d3.select(".barchart").append('svg')
    .attr("height", height)
    .attr("width", width)    
var rect = svg.selectAll('rects')
    .data(data)
    .enter()
    .append('rects')
    .attr("height", function(d, i) { return height - y(d) })
    .attr("width", function (d, i) { return x(d) })
    .attr("x", function(d, i) { return x(i) })
    .attr("y", function(d, i) { return y(d) })
    .attr("fill", "blue")

Answer 1

有多个问题，所以我只列出它们。

更改X和Y量表。你有点不合时宜。

var x = d3.scale.linear()
    .range([0, width])
    .domain([0, data.length]);
var y = d3.scale.linear()
    .range([0, height])
    .domain([0, d3.max(data)]);

将'rects'更改为" rect"。

var rect = svg.selectAll('rect') // <-- here
    .data(data)
    .enter()
    .append('rect') // <-- and here

最后，您的X，Y，宽度和高度计算的逻辑已关闭。

.attr("height", function(d, i) { return y(d); })
.attr("width", width / data.length - 1)
.attr("x", function(d, i) { return x(i); })
.attr("y", function(d, i) { return height - y(d); })

确保您正在使用分号。

http://jsfiddle.net/gnouvg6z/