在Mozilla Firefox

Question

我正在关注D3的一些教程，并发现Mozilla Firefox没有渲染我代码中的所有<div>元素。

对那里发生的事情有任何想法吗？

var dataset = [ 5, 10, 15, 20, 25 ];

d3.select("body").selectAll("div")
    .data(dataset)
  .enter()
    .append("div")
    .classed("bar", true)
    .style("height", function(d){
        return d * 5  + "px";
    });

div.bar {
  display: inline-block;
  width: 20px;
  height: 75px; /* We'll override height later */
  background-color: teal;
  margin-right: 2px;
}

<script src="https://d3js.org/d3.v5.min.js"></script>

Chrome（正确）

Firefox（仅显示4个div）

Answer 1

如@GerardoFurtado所述，问题可能是选择器无处不在地选择<div>元素，可以使用null选择器进行纠正：

d3.select("body").selectAll("null")

详细答案可以在这里找到： Selecting null: what is the reason behind 'selectAll(null)' in D3.js?