简单的 d3 条形图不显示答案

【问题标题】：Simple d3 bar graph doesn't show up简单的 d3 条形图不显示
【发布时间】：2012-06-04 23:15:27
【问题描述】：

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

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

【问题讨论】：

标签： javascript svg d3.js bar-chart

【解决方案1】：

您可能需要添加一些 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")。我建议不要使用命名空间。