How to create a tooltip with custom value - d3.js

Question

i use NVD3 for a scatter chart but when hovering for the tooltip i want the label instead of the key.
this is my json:
long_data = [
{
key: 'PC1',
color: '#00cc00',
values: [
{
"label" : "Lichtpuntje" ,
"x" : 11.16,
"y" : -0.99,
"size":1000,
"color": '#FFCCOO'
} ,
{ ....
this is the js
nv.addGraph(function() {
chart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
.useVoronoi(true)
.color(d3.scale.category10().range())
.transitionDuration(300)
...
chart.xAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickFormat(d3.format('.02f'));
chart.tooltipContent(function(i) { return labelArray[i]; });
d3.select('#test1 svg')
.datum(long_data)
.call(chart);
...
how i can i get the tooltip to have the label value? or how can i have i as index parameter?

Answer 1

ok, not a clean solution, but works:
chart.tooltipContent(function(key, y, e, graph) {
labelIndex=arrayContains(resultYVal, e);
return resultLabel[labelIndex];
});
function arrayContains(a, obj) {
var i = a.length;
while (i--) {
if (a[i] == obj) {
return i;
}
}
return false;
}

Answer 2

You can access your label variable like this:
chart.tooltipContent(function(graph) {
console.log(graph); //examine the graph object in the console for more info
return graph.point.label;
});

Answer 3

Newer NVD3 versions use tooltipGenerator. Also I don't understand why shev72 is iterator over the whole series, we're getting the index in the series by NVD3 directly, e.g. if our data looks like this:
data = [{"key": "Group 0", "values": [{"y": 1.65166973680992, "x": 0.693722035658137, "z": "SRR1974855"}, {"y": 1.39376073765462, "x": -0.54475764264808, "z": "SRR1974854"}]
then you can get your z values like this:
chart.tooltip.contentGenerator(function (d) {
var ptIdx = d.pointIndex;
var serIdx = d.seriesIndex;
z = d.series[serIdx].values[ptIdx].z
return z;
});

Answer 4

For anyone here having issues trying to show a custom tooltip with InteractiveGuideline enabled, you must use the following:
chart.interactiveLayer.tooltip.contentGenerator(function (obj) { ... });
As a bonus, here's the code for the default table layout with an added custom value 'z':
chart.interactiveLayer.tooltip.contentGenerator(function (obj) {
var date = obj.value; // Convert timestamp to String
var thead = '<thead><tr><td colspan="4"><strong class="x-value">'+ date +'</strong></td></tr></thead>';
var table = '<table>' + thead + '<tbody>';
// Iterate through all chart series data points
obj.series.forEach(dataPoint => {
// Get all relevant data
var color = dataPoint.color;
var key = dataPoint.key;
var value = dataPoint.value;
var string = dataPoint.data.z; // Custom value in data
var row = '<tr><td class="legend-color-guide"><div style="background-color: '+ color +';"></div></td><td class="key">'+ key +'</td><td class="string">'+ string +'</td><td class="value">'+ value +'</td></tr>';
table += row;
});
// Close table & body elements
table += '</tbody></table>';
return table;
});

Answer 5

I found the answer from davedriesmans quite useful, however note that in the code
chart.tooltipContent(function(key, y, e, graph)) is not for a scatterPlot.
This looks like the function for a pie chart. In that case you can use the e.pointIndex directly to allow you to index into the series by graph.series.values[e.pointIndex].
However, I built on the function davedriesmans suggested for a scatterplot as follows.
function getGraphtPt(graph, x1, y1) {
var a = graph.series.values;
var i = a.length;
while (i--) {
if (a[i].x==x1 & a[i].y==y1) {
return a[i];
}
}
return null;
}
the main chart call to insert the tooltip is just
chart.tooltipContent(function (key, x, y, graph) {
s = "unknown";
pt = getGraphtPt(graph, x, y);
if (pt != null) {
//below key1 is a custom string I added to each point, this could be 'x='+pt.x, or any custom string
// I found adding a custom string field to each pt to be quite handy for tooltips
s = pt.key1;
}
return '<h3>' + key + s + '</h3>';
});