D3.js 热图不显示第一个矩形_D3.js_Data Visualization_Heatmap

D3.js 热图不显示第一个矩形

d3.js

D3.js 热图不显示第一个矩形,d3.js,data-visualization,heatmap,D3.js,Data Visualization,Heatmap,我根据data.csv文件中包含的一些数据创建了一个热图这是代码 index.html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Heatmap</title> <script src="https://code.jquery.com/jquery-3.1.0.js"></script&g

我根据data.csv文件中包含的一些数据创建了一个热图

这是代码

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Heatmap</title>
   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
   <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>
<body>
   <div id="heatmap"></div>
   <script src="./heatmap.js"></script>
</body>
</html>

上的工作代码

这就是结果：

除未显示的第一个矩形外，热图创建正确

然而，数据是以正确的方式获取的，那么问题出在哪里呢？我不明白。

我知道这是一个副本，但我找不到匹配的副本，所以

切勿按元素名称盲选All：

svg.selectAll('rect')

SVG中还包含其他导致奇怪行为的

rect

元素。相反，你应该：

svg.selectAll('.cell')
    .data(data)
    .enter()

这将选择数据绑定到的对象

更新

svg.selectAll('.cell')
    .data(data)
    .enter()