D3.js 在 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>

铬（正确）

Firefox（仅显示 4 个 div）

Answer 1

正如@GerardoFurtado 所指出的，问题可能是选择器无缘无故地选择了一个

<div>

元素，并且可以通过使用

null

选择器来更正：

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

可以在这里找到详细的答案： Selecting null：D3.js 中 'selectAll(null)' 背后的原因是什么？

Answer 2

美好的一天。 Firefox 与 d3 存在兼容性问题。有一次圆形元素在 firefox 上没有显示，尽管 chrome 和 edge 没有问题。我的代码是这样的

element.append("circle").style("r",10)

当我变成

element.append("circle").attr("r",10)

它可以在 Firefox 上呈现。 您可以尝试将 style 元素更改为 attr 元素。 希望它有效。