Additional tooltip text using tipsy and d3.js

Question

Not really sure how to work with these tooltips, as I'm working off some example code. I have a scatterplot created by d3.js that uses tipsy to add tooltips to each circle. This is the part of the code that adds the label when you rollover any circle:

circles.append("title")
  .text(function(d) { return d.attribute; })

"Attribute" is one of the columns in my data. I can change this to any of my column names and that becomes what's shown in the tooltip. What I'd like to do is have a tooltip with a full sentence that includes a piece of data from each column. What I'd love to do is something like this, which, of course, doesn't work at all, but I hope it gets the point across:

circles.append("title")
  .text(function(d) { return d.attribute; } + "some text here" + function(d) { return d.variance; }    + "more text here" + function(d) { return d.incidence; })

Thoughts on how I might make this work?

score 1 · Accepted Answer · answered Nov 24 '14 at 02:33

You can do this:

circles.append("title")
  .text(function(d) {
     return d.attribute + " some text here " + d.variance + " more text here " + d.incidence;
  })

Everything together:

var data = [
  {
    "attribute": "attr1",
    "variance": "variance1",
    "incidence": "incidence1"
  },
  {
    "attribute": "attr2",
    "variance": "variance2",
    "incidence": "incidence2"
  },
  {
    "attribute": "attr3",
    "variance": "variance3",
    "incidence": "incidence3"
  } 
];

var svg = d3.select('body').append('svg');

svg.attr('height',500).attr('width',500);

var circles = svg.selectAll('circle').data(data);

circles.enter().append('circle')
  .attr('cx',function(d,i) { return i * 100 + 100;})
  .attr('cy',function(d,i) { return 100})
  .attr('r',50)
  .attr('fill','green')
  .append('title')
  .text(function(d) {
    return d.attribute + " some text here " + d.variance + " more text here " + d.incidence;
  }) 
  .attr('fill', 'black')

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Additional tooltip text using tipsy and d3.js

1 Answers1