D3 热图的工具提示 canvas

Question

我正在处理 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。

用于添加工具提示的代码：

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);

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

要获得强度，请执行以下操作：

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];
    })

工作代码here

希望对您有所帮助！

D3 热图的工具提示 canvas

Tooltip for D3 Heatmap canvas

canvas

tooltip

d3.js

d3heatmap