d3.js 中的数据绑定

Question

注：我对 javascript 和 d3.js 完全陌生（昨天开始），如果我忽略了一些明显的东西，我深表歉意。

我在理解 d3 如何处理数据以及数据绑定如何工作方面存在问题。 我正在尝试重新创建这个heatmap 不同的是我的起始表应该包含标签而不是索引。 （数据来自数据库请求）。

 day hour   value
 Mon am 16
 Mo pm 20
 Tue am 0
 Tue pm 0
 Wed  am 45
 Wed pm 8

我知道 d3.js 有一个变量，变量 d（用于数据）和 i 用于索引，但我不知道如何使用它。

到目前为止，我已经尝试替换这些行

          .attr("x", function(d) { return (d.hour - 1) * gridSize; })
          .attr("y", function(d) { return (d.day - 1) * gridSize; })

与

          .attr("x", function(d,i) {return d.hour, i * gridSize;})  
          .attr("y", function(d,i) {return d.day, i * gridSizee;})  

但是我得到了一个奇怪的盒子排列。

我错过了什么？

我真正的问题是： 您如何访问索引而不是值？

提前致谢

Answer 1

您使用的函数将索引作为第二个变量，将数据作为第一个变量，因此您需要调用 data 变量，但您可以忽略它：

 .attr("x", function(d,i) {return i * gridSize;})