CODEWITHSUNDEEP
d3.jstooltipbubble-chart
krishna_v
krishna_v

Reputation: 1511

In d3 js how to append the additional text as tool tip on the circles

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]]

} ]

Upvotes: 1

Views: 145

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

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; });

Upvotes: 1

Related Questions