javascript - 简单的 d3 条形图不显示

Question

这是我正在尝试的简单条形图。但是什么都没有出现。

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创建矩形，就像我在控制台中看到的那样，但我在浏览器中看不到它。

Answer 1

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