D3.JS: Multi-series line chart, show tooltip for all lines at date? -
i've created multi-series line chart tooltips. please check out @ this jsfiddle.
currently, tooltip works expected: when hover on circle, shows tooltip data's value @ 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, open tooltips @ data points x-value. this:
of course correct values points.
how modify code achieve this? appreciated!
how about:
var tooltip = d3.tip() .attr('class', 'tooltip') .offset([-10, 0]) .html(function (d) { (var = 0; < 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) { (var = 0; < 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>
Comments
Post a Comment