Question

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

这是代码。

的index.html：

flow_from_directory

的script.js：

<!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>

PLUNKER 上的工作代码。

这是结果：

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

然而，数据以正确的方式被采集，那么问题出在哪里？我不明白..

Answer 1

我知道这是重复的，但我找不到匹配的...

永远不要按元素名称选择盲选：

svg.selectAll('rect')

SVG中还有其他rect元素被包含在内，导致奇怪的行为。而是做：

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

这会将选择的目标定位为您真正将数据绑定到的内容。

更新了plunker。

Heatmap不显示第一个rect

1 个答案: