I've been experimenting with creating a tooltip similar to the one showcased here: http://bl.ocks.org/sdbernard/2e44bd82c9d048b88451/2b31b98b8f6acb8d7c6026b5eec801e2f1f61ab2
The code and data structure in that block are similar to mine, but with the addition of small multiples. You can see my version on Plunker here: http://plnkr.co/edit/BsLMhbldIYvZEVOu23aM?p=preview
However, when I try to adapt the tooltip to show month and year, or just year as in the original, I encounter an error message saying "Cannot read property '-1' of undefined."
The issue seems to be with the following code snippet:
var mousex = d3.mouse(this);
mousex = mousex[0] + 10;
var invertedx = xScale.invert(mousex);
// The problem lies here: //
invertedx = invertedx.dates;
var selected = (d.value);
mousedate = dates.indexOf(String(invertedx));
pro = d.value[mousedate].y;
Alternatively, this approach doesn't work either:
invertedx = invertedx.getMonth() + invertedx.getFullYear();
var selected = (d.value);
for (var k = 0; k < selected.length; k++) {
dates[k] = selected[k].x
dates[k] = dates[k].getMonth() + dates[k].getFullYear();
}
mousedate = dates.indexOf(invertedx);
pro = d.value[mousedate].y;
You can view my Plunker again for reference: http://plnkr.co/edit/BsLMhbldIYvZEVOu23aM?p=preview I've been stuck on this for almost a week now and would greatly appreciate any help or guidance. Thank you in advance.