Tooltip for D3 Heatmap canvas

Question

Here i'm working on D3 Heatmap with resettable zoom, but i want to add tooltip to view the intensity count. With help of D3 tip, i tried to add tooltip, but don't know how to get the intensity count from canvas, where the heatmap is drawn as an image data. Please check out my fiddle.

Code used for adding tooltip:

var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
    return "tooltip";
})
svg.call(tip);

svg.on('mousemove', tip.show);
svg.on('mouseout', tip.hide);

Any help would be greatly appreciated.

Thank you in Advance.

Answer 1

To get the intensity do the following:

var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([10, 0])
    .html(function (d) {
        var k = d3.mouse(this);
        var m = Math.floor(scale[X].invert(k[0]));//will give the scale x
        var n = Math.floor(scale[Y].invert(k[1]));//will give the scale y
        return "Intensity Count: " + heatmap[n][m];
    })

Working code here

Hope this helps!