2012-05-30 185 views
0

这是我正在尝试的简单条形图。但没有出现。简单的d3条形图不显示

var data = [4, 8, 15, 16, 23, 42]; 
var chart = d3.select("body").append("svg:svg") 
.attr("class", "chart") 
.attr("width", 420) 
.attr("height", 20 * data.length); 

var x = d3.scale.linear().domain([0, d3.max(data)]).range([0, 420]); 

chart.selectAll("svg:rect") 
.data(data) 
.enter().append("svg:rect") 
.attr("y", function(d, i) { return i * 20; }) 
.attr("width", x) 
.attr("height", 20) 

如果我使用rect代替svg:rect的rects获得创建,我可以在控制台中看到的,但我不能看到它在浏览器中。

回答

0

您可能需要添加一些CSS来填充/着色矩形。例如,您也可以使用.style("fill", "red")进行设置。

+0

它已经在CSS中完成了,但没有显示出来。另外,如果我将鼠标移动到控制台窗口中的'rect'节点上,它将突出显示该节点。但是也没有节点突出显示 –

+0

啊,发现了它。将设置宽度的行更改为'.attr(“width”,function(d){return x(d);})''。 –

+0

完成但仍然无法正常工作。 –