Using React (Hooks) with D3 – [05] Interactivity

Hi, this is part 5 of my series: "Using React (Hooks) with D3", and in this one, we add some interactivity. Also: I am using a Dark Theme this time. I noticed I am pronouncing "hover" wrong, sorry about that. How can I use "cover" and "hover" in the same video, but still pronounce hover wrong? Oh well.

Hope you like it!

[muratorium]

Please note: This video was made with D3 version 5. There is now a newer version of D3 (v6), which has changed Event Handling. The GitHub repo has been updated for that:

[nickstaresinic]

Your video series helped me a *lot* when I was transitioning from the Victory library to 'native' D3 with Hooks a few months ago. I came back this weekend when I felt the need for a review and your series really holds up well. It's so much more focused, thorough, and (especially) practical than many of the tutorials that are around. And I even picked up a few things I missed the first time through. Overall: Very good work!

[candicekang]

Personally, using .attr("opacity", 1.0) will not work, react render treats the 1.0 as string "1". After a little search, using .style("opacity", 1.0) works! If anyone else has the same 'text not showing' problem, this might be why. Guess probably to another version update or something. :) Thanks to Muri, the video series is so nice and well explained!

[juliabiesiada]

Fantastic series, all the videos are extremely helpful! Thanks

[thomasjayrush]

Excellent videos. You tried to explain why you had to use the xScale(index) in the tooltip which made sense, but if you used a different name such as dataIndex above, it would have been much more clear. The trouble is using 'index' in more than one frame of reference.

[jean-archibalddelafontaine]

Thank you for your serie of video. It s really useful.

[StreetCertifiedRecords]

Hi Muri, hope you are doing well! How can we access the font size and style of the hover element? Is it possible to make the font size smaller depending on the number of data points added to the chart? Thanks in advance and really enjoying the tutorial so far!

[eugeniakim]

Hey! Thanks for making these videos. I am having trouble with the .on("mouseenter" ) I don't have access to the index in the callback. It only gives you the value and the event object itself. I've gotten it to work (kind of) by calculating the index by using indexOf method on the data we pass in as props. It looks like this .attr("x", xScale(data.indexOf(value)) + xScale.bandwidth() / 2). But what about cases where I could have two bars with the same value. Do you know how to fix this properly or why I might not have access to index?

[Valelacerte]

Applying all the attributes inline within the SVG could also be achieved by instead applying a class and keeping all styles within an external SCSS/CSS file. I think this would be better for separation of concerns. Now that SVG can be placed inline within HTML5, it should follow the same model as styled HTML.

[specialk]

For some reason, data isn't displayed (mouseenter doesn't work) when I hover over the bars. Any idea how I can fix this? It does show up in the console though....

Update: I had the same problem but wogandmush's comment on Mikkel's posting solved the issue.

[vinod_chauhan]

The xScale numbering from 0 to data.length does seems to reflect correctly when we hit 'Add Data' button. Alignment get distorted on click. I have checked it with your code also from git.

[zeeshannagori]

Hi Muri, Thanks for this video. Can you explain how can I add interactivity in line chart?

[slaske]

For some reason the text seems to be invisible. It shows up in the console, hovering over it shows the corrent values and placement, however the text is just not visible in the chart.

[andybarnes]

`mouseenter` does not work as expected. I have to click on the bar to see the text.