data binding in d3.js

Question

NB: I am completely new to javascript and d3.js (started yesterday), apologies if I am overlooking something obvious.

I have a problem in understanding how data are handled by d3 and how data binding works. I am trying to recreate this heatmap With the difference that my starting table should include labels and not index. (data are coming from a db request).

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

I understand that d3.js has a variable has the variables d (for data) and i for the index but I can't figure out how to use it.

So far I have tried to replace the lines

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

With

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

But I get a strange arrangement of the box.

What have I missed ?

My real question is : how can you access the index and not the values ?

Thanks in advance

Answer 1

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

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