Javascript 简单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

，我可以在控制台中看到，但在浏览器中看不到

您可能需要添加一些CSS来填充/着色矩形。您也可以使用

.style（“fill”，“red”）

来设置它。

它已经在CSS中完成了，但是没有显示出来。另外，如果我将鼠标移到控制台窗口中的

rect

节点上，它将高亮显示该节点。但是没有高亮显示任何节点。啊，发现了它。将设置宽度的行更改为

.attr（“width”，function（d）{return x（d）；}）

。您还需要将selectAll调用中的svg:rect更改为编辑中建议的rect。但是为什么

svg:rect

不起作用呢？即使我将其更改为

rect

，它也不会显示。选择器不支持名称空间，因此您不能

selectAll（“svg:rect”）

。（语法应该是

selectAll（“svg | rect”）

，但大多数浏览器都不支持这种语法。）最新版本的D3不需要名称空间来创建元素，因此现在您也可以

append（“rect”）

。我建议不要使用名称空间。