Scatterplot in D3.js - 'undefined' result is all that displays

Hi there,
Please see the codepen below:

I am unable to render text from the data values contained in the object array within the browser console. I would like to see the Year, Name, Time, and Allegation statement(or no allegation). I am using version 7 of D3.js library.

What would you suggest I do in order correct the issue that I am having?

  "Time": "36:50",
  "Place": 1,
  "Seconds": 2210,
  "Name": "Marco Pantani",
  "Year": 1995,
  "Nationality": "ITA",
  "Doping": "Alleged drug use during 1995 due to high hematocrit levels",
  "URL": ""

this is one of the objects array called values in your code , i’ve got it from the console log, so i think you code is working fine .

I did find that the ‘values’ were displayed in the browser console. However; I have a more specific question on user story #14. If I ‘mouseover’ the individual circles or ‘dots’ I do not get the text to output the specified ‘Year’ - ‘Name’ - ‘Time’ - ’ Allegation’. Both statements in the conditional(below) result in the same text output on the bottom of the screen in Codepen. All that is rendered to the UI is ‘undefined’-‘undefined’-‘undefined’-‘undefined’. Why does the .text method not display anything other than ‘undefined’?

For input, I am keying:


if(item['Doping'] != ''){
      tooltip.text(item['Year'] + ' - '+ item['Name'] + ' - ' + item['Time'] + ' - ' + item['Doping'])
      tooltip.text(item['Year'] + ' - '+ item['Name'] + ' - ' + item['Time'] + ' - ' + 'No Allegations')

I found that if I change the D3 library version within the script src tag to v5 or lower that the tooltip “hover over” feature displays the correct console.log data as indicated in the previous message. I do not have any further questions on this topic since I got all of the tests to pass for the project.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.