CODEWITHSUNDEEP
javascriptd3.jsheatmap
user1043144
user1043144

Reputation: 2710

data binding in d3.js

N.B: 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

Upvotes: 0

Views: 572

Answers (1)

Elijah
Elijah

Reputation: 4639

The function you're using provides the index as the second variable and the data as the first, so you need to call the data variable but then you can ignore it:

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

Upvotes: 1

Related Questions