Question

I am working on a d3 sample http://bost.ocks.org/mike/nations/:

enter image description here

I am trying to add title for circles with with the name as well as checkin details.

following is the modified code for the display year function (rest of the code almost no change,,,):

 // Updates the display to show the specified year.
  function displayYear(year) {
    dot.data(interpolateData(year), key)
    .call(position)
    .sort(order);

    dot.append("title").text(function(d) { return d.name});

    dot.text(function(d) { return d.name + "~"+ d.checkins + d.Checkintimes; });

    label.text(Math.round(year));

      }
// Interpolates the dataset for the given (fractional) year.
  function interpolateData(year) {
    return nations.map(function(d) {
      return {
        name: d.name,
        region: d.region,
        checkins: interpolateValues(d.checkins, year),
        teamsize: interpolateValues(d.teamsize, year),
        Checkintimes: interpolateValues(d.Checkintimes, year)
      };

    });
  }

However the same is not appearing as title in the circles. I just want to append the checkin detail with the circle.

My json file contains the following:

[ {

"name":"Search&Navigator",
"region":"IPScience",
"checkins":[[2000,100],[2001,200],[2002,300],[2003,275],[2004,222],[2005,280],[2006,281],[2007,400],[2008,55],[2009,300]],
"teamsize":[[2000,10],[2001,7],[2002,7],[2003,12],[2004,5],[2005,3],[2006,10],[2007,12],[2008,12],[2009,10]],
"Checkintimes":[[2000,40],[2001,50],[2002,60],[2003,50],[2004,40],[2005,30],[2006,30],[2007,35],[2008,30],[2009,30]]

} ]

Was it helpful?

Solution

Your variable dot doesn't contain a reference to the title element. Simply change the function that appends it to do what you want:

dot.append("title")
   .text(function(d) { return d.name + "~"+ d.checkins + d.Checkintimes; });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top