D3 Tooltip can't access data, shows undefined

I’m working on the d3 challenge with the scatterplot. It works pretty well so far except that the values on the tooltip are not shown but ‘undefined’ is rendered.

svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", (d) => xScale(d.Year))
        .attr("cy",(d) => yScale(d.Time))
        .attr("r", (d) => 5)
        .attr('fill', (d) => colorScale(d.URL === ''))
        .on('mouseover', function(d) {
          ttip.transition()
              .duration(500)
              .style('opacity', .9);
          ttip .html(d.Year + ': ' + d.Time)
              .style('left', (event.pageX) + 'px')
              .style('top', (event.pageY - 30) +           'px');
        })
        .on('mouseout', function(d) {
          ttip.transition()
            .duration(300)
            .style('opacity', 0);
        });

https://codepen.io/simonhunziker/pen/dypjrpV

I don’t understand why for example d.Time is accessible by .attr(“cy”,(d) => yScale(d.Time)) but not by the function which is called on mouseover.

Hope anyone can help. Thanks

Welcome to the forums @simonH.

Looks like there are two issues. One, you have to actually add the year and times to the tool tip attributes via .attr('data-year', ...). Second, D3v6 has changed the interface to the .on('mouseover', ...) functions; they now require a call signature like .on('mouseover', (event, datum) => {...}) where datum is your current data object. You can then access the data for your html for the tool tip and for the attributes you need to pass the tests.

Older versions of D3 used a different event call signature; unfortunately, most of the available D3 examples still use the old way. The definitive documentation is at D3’s github repo if you’re curious.

Good luck.

2 Likes