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

更改＆＃39; rects＆＃39;到＆＃39; rect＆＃39;。

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/

D3条形图没有填充。

1 个答案: