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