Example for Cooperative Brushing and Tooltips in D3.
The tooltip helper function for dynamic tooltips.
Example for Cooperative Brushing and Tooltips in D3.
The tooltip helper function for dynamic tooltips.
//Pattern from: http://www.biovisualize.com/2012/07/embedding-d3js-in-blog-post.html | |
d3.helper = {}; | |
d3.helper.tooltip = function(){ | |
var tooltipDiv; | |
var bodyNode = d3.select('body').node(); | |
function tooltip(selection){ | |
selection.on('mouseover.tooltip', function(pD, pI){ | |
// Clean up lost tooltips | |
d3.select('.body').selectAll('div.tooltip').remove(); | |
// Append tooltip | |
tooltipDiv = d3.select('body') | |
.append('div') | |
.attr('class', 'tooltip'); | |
var absoluteMousePos = d3.mouse(bodyNode); | |
tooltipDiv.style({ | |
left: (absoluteMousePos[0] + 5)+'px', | |
top: (absoluteMousePos[1]) + 'px', | |
'background-color': '#d8d5e4', | |
width: '65px', | |
height: '30px', | |
padding: '5px', | |
position: 'absolute', | |
'z-index': 1001, | |
'box-shadow': '0 1px 2px 0 #656565' | |
}); | |
var first_line = '<p class="tooltip">X-Value: ' + pD.index + '</p>'; | |
var second_line = '<p class="tooltip">Y-Value: ' + pD.value + '</p>'; | |
tooltipDiv.html(first_line + second_line); | |
}) | |
.on('mousemove.tooltip', function(pD, pI){ | |
// Move tooltip | |
var absoluteMousePos = d3.mouse(bodyNode); | |
tooltipDiv.style({ | |
left: (absoluteMousePos[0] + 5)+'px', | |
top: (absoluteMousePos[1])+'px' | |
}); | |
}) | |
.on('mouseout.tooltip', function(pD, pI){ | |
// Remove tooltip | |
tooltipDiv.remove(); | |
}); | |
} | |
tooltip.attr = function(_x){ | |
if (!arguments.length) return attrs; | |
attrs = _x; | |
return this; | |
}; | |
tooltip.style = function(_x){ | |
if (!arguments.length) return styles; | |
styles = _x; | |
return this; | |
}; | |
return tooltip; | |
}; |