Integrating d3.js with React - Simple Charts - Bar Chart tooltip interaction

the last thing we're going to do is we're going to add a tooltip and once we hover over the bars we're going to create a tooltip that will show up at the top of each bar and give us information about the bar which is the percentage and that will help our user interact with our chart inside bar chart component go to the bottom of the component where we return the j6 code and let's add the tooltip as an element we're gonna wrap it with an element of type div and we'll give it an id of tool tip and also i'm gonna give it a class name of tooltip this way i can create a sas um style and instead of putting the code here and then inside of our tooltip i'm going to create another div and i'm going to give it a name of a class name of tooltip framework and that will hold that label that you saw of the name of the tooltip and inside that div i'm going to put a span element and the span element is going to hold the actual text the name of the framework and you can close that collapse that and then and the other element we need is we need to um put the value of that framework so we're going to create a div and let's call it tooltip dash value and inside we'll put another span to hold the text and i'll give it an id of count and add a percentage um so it's going to show the percentage so now that we have the element we can start work on the interaction if we go back into our memorize update callback we already done the peripheral and what we can do is we can add our interaction um under deferred roles so what we can do is we can use d3 and then we can select the element we created which was the id was tool tip and then what we can do we can start handling um mouse events right so what we can do is we can um create a rectangle around our component and listen to mouse events so the way we're going to do it we're going to do d3 select all and we're going to select all the rectangle meaning all the beans and we're going to listen to mouse events from those beans so every time the user mouse enter mouse leave those beans we can display that tooltip so the way we're going to do it is we're just going to use on mouse enter event and then we'll create a handler let's call it mouse on mouse enter and we can do the same once the user exit so once the user leave that bin will handler will handle the on mouse leave and then we can let's just create those function so function on mouse enter and it's going to expect an event and it's going to expect a date on which is our data type that we're going to be passing and the same for on mouse leave and for mouse lead it's pretty simple what we need to do is we need to um just um style the opacity of the tooltip to zero so when we first start um with our element that tooltip we're gonna set the opacity to zero so you don't see it on the screen and then once the mouse leave we need to put the opacity back to zero so we can create a constant and called tooltip and that's going to equal our selector tool tip and then we can on mouse leave we can just call the tool tip and set the style of the opacity to zero okay so we have the mouse sleeve event and we have the mouse enter event so um i have a typo it's mouse leave [Music] it has to be um camel case so mouse enter around sleeve okay and then on now we just need to um to handle um mouse enter now um d3 change the way they handle events and they made it much more easier in version 6 which which is the version we're using so if we want to get the current position of the x and y we would just do something like this we'll do the constant x and y from d3 pointer and that will give us if we pass in the event that will give us the position of the x and y it's going to give us the client x and y so this is just for you to remember we don't need to use it but it's good to really know that and remember that and um you know since they changed the event mechanism and how it's been handled they just made it much more easier to work with version versus the earlier version of d3 if you ever worked with it now what we want to do is the first thing we're going to do is we're going to um we're going to set the text on our for the value so we can call the tooltip and we can select the count element that we set and then we can set the text to the tone value so that will set our you know the count and now the next thing we need to do is we need to set we need to figure out where to position those um the tooltip so we need to figure out the the y and the x so let's call it bar y and bar x so we need to figure out how how to position it and that's a little you know it's um we have to put some thoughts into it so what we need to do is few things for the brow y we need to first figure out the location of the bar and the location of the bar we can figure out using the the scales and the y scale for the y and then we can pass in the y accessor with the d tom and that's gonna give us the location of the y and then we need to do a couple more things we need to add the dimensions of the margin top and we need to add the dimensions of the margin bottom so if we do all of that together that's going to give us the location of the y now for the location of the x um it's really similar what we need to do is we need to call scales use the x scale this time use the use the dtom of the framework and once we we use the datum of the framework and we need to do we need to add couple more things we need to add the properties of the dimensions of the margin left and we need to add the properties of the dimension of the margin right then the last thing we need to do is we need to um because it's when we hover over it's going to give us one bar before so um so what we need to do is we i'm sorry we want to center it in the middle of the bar so to center it in the middle of the bar what we can do is we can um divide it divide the bandwidth of the bar by four and that's going to position it for us um pretty much in the middle so if i do scales that x scales that bandwidth and i'll divide it by four that's going to give us position it in the middle instead of you know giving us the position of the of the beginning we have to add ts ignore because it doesn't like it we haven't defined it the dtom so now that i have the x and the y um the next thing we need to do is we need to calculate the location so to calculate the location we can call the tooltip with the style and we can set the transform [Music] and translate it can put it and translate it using the calculate method so we can do a translate and inside we can we can set we can have it calculated so it's in the middle so to calculate it that it's in the middle what we can do is we can set the minus 50 and then add the x bar and of course we need to put pixel and we need to do the same for the um for the y location we need to do a calculate of a hundredth plus the bar y and that's going to be in pixel and those calculation you know this will be starting from the whole screen and then we um you know we reduce the the y to position it right on top of our bar let me see that it's got clothes right looking good then we also need to set the opacity because we're gonna um we're not gonna display it when you first load the page so we need to set just like we said the opacity um on mouse sleeve we need to set the opacity to one once you hover over um any of the bars let's check our code so if we go to localhost it doesn't work let's see why other the mouse event has to be lowercase let's refresh it here you go it looks like it's work but it's missing the framework let's take a look if you remember we have um we added an element that we called um framework right so we also need to set it up on the mouse enter event so once the mouse enter event and we need to add another code to handle will select the framework element selector and we'll set the text to the dton dot framework there we go let's take a look there you go now it works the only thing that i haven't showed you that working behind the scene is if you look at the sass file i created a few elements i created the tooltip css and i created that carrot that you see once you hover over the bar element there's a carrot so you could see the code here this is just a tooltip and a carrot you can see that the opacity is zero once you know the element first entered the screen and i'm using absolute positioning and also take a look that the my z index is 999 because i want it to be in front of other elements so to make sure it's in front of other elements what i've done is first i positioned it um right after the div and i gave it the layer as in 99 to make sure that happen and i removed the pointer event so once you um hover over them it won't capture um mouse events and you can see we can actually hover over the bars and we see the data right above that and it's just another layer for the user so it's going to be easy to interact with our chart now if we look at the actual result from the chart it's actually interesting because react is coming up second then jquery but notice that we have gatsby which is a react based framework and set up separately and also for angular angular coming up third with 25.1 percent but we have angularjs so angularjs is the previous version of angular set is a separate framework so because of that you know those results if you take the data and play around with the data we can really see different types of results if you add um the percentage of gatsby as part of um react that will change that so looking at the chart it really gives us an idea of the most popular framework so all the framework that went above our main line it means that our really those are the top um framework out there for the year 2020 and and then you can also see with the net that they have the dotnet core at 19.1 and then the asp.net is 21.9 so um obviously um that net developers um you know takes significant chunk of the framework and the you know the people that building um code in 2020 so but you know using this chart it really gives us a nice way to kind of look at the data and and see where we're at in where we at in terms of framework for the year 2020.

Channel: React Tutorials & Tips For ReactJs, d3 Developers

Views: 330

Rating: 5 out of 5

Keywords: d3js, d3, d3.js, react, react.js, reactjs, typescript, javascript, ts, js, integrate, Bar Chart tooltip interaction

Id: 4Ii9NYLw5y0

Length: 16min 54sec (1014 seconds)

Published: Thu May 27 2021