How to get data and index in d3 v6.5.0

JavaScript
#1

Tell us what’s happening:
Hi everybody. I was using d3 (v6.5.0) from google libs. In d3 version 4.2.2, the following code part works magically.

.on(‘mouseover’, function (d, i){…

where d is the data value and the i is the index value. However, when I use v6.5.0, d becomes an event object and i becomes data value. I can’t access the index value.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36 Edg/88.0.705.63.

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

#2

I haven’t used d3 before so I’m not sure what the ‘index value’ is referring to in v4.2.2? But that event object you are getting in v6.5.0 should have all of the information you need about the element that is currently being moused over. Do a console.log on it and you can look at everything it is giving you.

#3

From some of my code:

  // D3 v6.
  .on('mouseenter mouseover', (event, datum) =>
  // D3 v5 and earlier.
  // .on('mouseenter mouseover', (datum, index) =>

as you noted. According to the documentation, there is no index any longer.

However, since datum just refers to one of your JSON data objects, you can cheat and loop over your data in the beginning and add an index value to each JSON object in your data array if you like.

Good luck.