D3.JS: Multi-series line chart, show tooltip for all lines at date?

Question

I've created a multi-series line chart with tooltips. Please check it out at this JSFiddle.

Currently, the tooltip works as expected: when you hover over a circle, it shows a tooltip with the data's value at that point.

var tooltip = d3.tip()
  .attr('class', 'tooltip')
  .offset([-10, 0])
  .html(function (d) {
    return '<strong>Population ' + (d.date).getFullYear() + ':</strong> ' + format(d.population) + ' people';
  });

svg.call(tooltip);

...

city.selectAll('.circle')
  .data( function(d) { return(d. values); } )
  .enter()
  .append('svg:circle')
  .attr('class', 'circle')
  .attr('cx', function (d, i) {
    return x(d.date);
  })
  .attr('cy', function (d, i) {
    return y(d.population);
  })
  .attr('r', 5)
  .on('mouseover', tooltip.show)
  .on('mouseout', tooltip.hide)

However, I would like to open tooltips at all data points with that x-value. So it would look like this:

Of course with the correct values for those points.

How could I modify my code to achieve this? Any help is greatly appreciated!

Did we already do this: http://stackoverflow.com/a/34887578/16363? — Mark, Jan 27 '16 at 16:19
@Mark It's similar in nature, but different in detail. This time, I'm working with D3-Tip and also, I want to display tooltips only when the user hovers over a data point, not when he hovers over the line part in between those points. — TheLeonKing, Jan 28 '16 at 10:19

score 3 · Accepted Answer · answered Jan 28 '16 at 14:31

How about:

var tooltip = d3.tip()
  .attr('class', 'tooltip')
  .offset([-10, 0])
  .html(function (d) {   
    for (var i = 0; i < data.length; i++){
      if (data[i].date === d.date){
        return '<strong>Population ' + (d.date).getFullYear() + '</strong><br/> City 1: ' + format(data[i].City1) + ' people <br/> City 2: ' + format(data[i].City2) + ' people <br/> City 4: ' + format(data[i].City3) + ' people <br/> City 4: ' + format(data[i].City4) + ' people';
      }
    }
  });

Full code (fiddle here):

var myData = "date,City1,City2,City3,City4\n\
20100101,85328,19658,33384,37822\n\
20110101,73527,20295,31127,37130\n\
20120101,71092,20394,31038,34788\n\
20130101,75263,19520,30751,33868";

var margin = { top: 50, right: 50, bottom: 50, left: 50 },
  width = 600 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;
    
var format = d3.format(',.');
var parseDate = d3.time.format('%Y%m%d').parse;

var x = d3.time.scale()
  .range([0, width]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient('bottom');

var y = d3.scale.linear()
  .range([height, 0]);

var yAxis = d3.svg.axis()
  .scale(y)
  .orient('left')
  .tickFormat(format);

var color = d3.scale.category10();

var line = d3.svg.line()
  .x(function(d) { return x(d.date); })
  .y(function(d) { return y(d.population); });

var svg = d3.select('body').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var tooltip = d3.tip()
  .attr('class', 'tooltip')
  .offset([-10, 0])
  .html(function (d) {   
    for (var i = 0; i < data.length; i++){
      if (data[i].date === d.date){
        return '<strong>Population ' + (d.date).getFullYear() + '</strong><br/> City 1: ' + format(data[i].City1) + ' people <br/> City 2: ' + format(data[i].City2) + ' people <br/> City 4: ' + format(data[i].City3) + ' people <br/> City 4: ' + format(data[i].City4) + ' people';
      }
    }
  });

svg.call(tooltip);

var data = d3.csv.parse(myData);

color.domain(d3.keys(data[0]).filter(function(key) { return (key !== 'date'); }));

data.forEach(function(d) {
  d.date = parseDate(d.date);
});

var cities = color.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {date: d.date, population: +d[name]};
    })
  };
});

x.domain(d3.extent(data, function(d) { return d.date; }));

y.domain([
  0, d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.population; }); })
]);

svg.append('g')
  .attr('class', 'y axis')
  .call(yAxis);

var city = svg.selectAll('.region')
.data(cities)
.enter().append('g')
.attr('class', 'region');

city.append('path')
  .attr('class', 'line')
  .attr('d', function(d) { return line(d.values); })
  .style('stroke', function(d) { return color(d.name); });

city.selectAll('.circle')
  .data( function(d) { return(d. values); } )
  .enter()
  .append('svg:circle')
  .attr('class', 'circle')
  .attr('cx', function (d, i) {
    return x(d.date);
  })
  .attr('cy', function (d, i) {
    return y(d.population);
  })
  .attr('r', 5)
  .on('mouseover', tooltip.show)
  .on('mouseout', tooltip.hide)

.axis path, .axis line {
 fill: none;
 stroke: #000;
 shape-rendering: crispEdges;
}

.line {
 fill: none;
 stroke: #444;
 stroke-width: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/Caged/d3-tip/master/index.js"></script>

D3.JS: Multi-series line chart, show tooltip for all lines at date?

1 Answers1