score:1

Accepted answer

In D3, the first parameter, normally named d, is the datum. Right now, your datum is an object like this:

{
    "Time": "38:36",
    "Place": 11,
    "Seconds": 2316,
    "Name": "Floyd Landis",
    "Year": 2006,
    "Nationality": "USA",
    "Doping": "Stripped of 2006 Tour de France title",
    "URL": "https://en.wikipedia.org/wiki/Floyd_Landis_doping_case"
}

Thus, you have to access their values by their keys:

.on('mouseover', function(d, i) {
    tooltip.transition()
        .style('opacity', .9)
    tooltip.html("Name: " + d.Name + "<br>Year: " + d.Year + "<br>Dopping: " + d.Doping)
        .style('left', (d3.event.pageX - 35) + 'px')
        .style('top', (d3.event.pageY - 30) + 'px')
})

Here is your updated CodePen: https://codepen.io/anon/pen/WpdyZv


Related Query

More Query from same tag