D3热图画布的工具提示

Question

这里我正在使用可重置缩放的D3 Heatmap，但我想添加工具提示来查看强度计数。在D3技巧的帮助下，我尝试添加工具提示，但不知道如何从画布中获得强度计数，因为热图是作为图像数据绘制的。请检查一下我的小提琴。

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

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

此处的工作代码

希望这能有所帮助！