I’ve complete most of the project and it seems to be working correctly but three tests are failing.
the first says The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.; But i zoom in and it seems like the data matches up perfectly with the x-axis values.
the other tests are for the tooltip i am wondering if I am assigning some of the attributes wrong because it displays the information needed when hovering over the graph?
can mouse over an area and see a tooltip with a corresponding id=“tooltip” which displays more information about the area
My tooltip should have a “data-date” property that corresponds to the “data-date” of the active area.
here is a link to the graph
maybe soon ill get through one of these projects without having any questions
for the tooltip, the test won’t pass using the title attribute, it’ needs to be a div or rect element (rect in a div with the id). Title is for accessibility and while it looks fine, it won’t pass this test suite.
For the data alignment, I’m curious about this part of your code:
const xScale = d3.scaleLinear()
.domain([0, json.data.length-1])
.range([padding, w - padding])
The domain should be the limits of your data, so 1947 to 2015 (or whatever the limits of the x data are).
I dont know, i though i was using the (width * number of data points = total width) but i guess not since i didnt multiply the number of data points by anything
Alright i cant get the tooltips to work properly i have even copied code that has worked for other but it doesnt work for me. My tooltip appears way up in the top corner and has for some reason i am using d[1] as the text but it shows up as undefined. I also get errors when trying to use d3.event pageY that the event is undefined but i thought the mouseover would be the event do i have to define the mouseover? It seems way too complicated just to add some tooltips i have them added using the title method shown in the lessons and the tootip worked perfectly but the code wont pass the tests written that way.
Everything is working except the variables in the tooltip are showing up as undefined ive tried everything including adding a .data to the tooltip itself it still shows up undefined. I has to be something really simple to fix i just cant figure it out. If anyone wants to have a look I would appreciate it.
Also does anyone who knows d3 know if there were previous versions that took slightly different syntax then the current version because i have tried some code from the internet and had to change the format for it to work correctly?
If anyone else has this problem you have to have e as well as d (e,d) variables as arguments in the mouseover function for it to work correctly which i havent seen in other examples.
Searching these issues in the forums will reveal numerous posts warning about the use of old tutorials with current D3. Many of the interfaces have changed since most tutorials were written against D3 versions 3 and 4. The best course of action is to use D3 version 7 and the official documentation of D3 on github (yes it’s dense, but it’s current and definitive).
As you found, D3 has used the (event, datum) => {...} callback interface for several versions now. Use of the datum index is discouraged as much as possible as D3 is bound to its data binding model that basically maps a datum to a DOM node with a primary result being that it’s better to have a data set that is a single array of dicts (so the current datum has everything) than to have multiple arrays indexed in the same order.