D3 条形图未填充。

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/