D3热图画布工具提示

Question

这里我正在研究可重设缩放的D3热图，但是我想添加工具提示来查看强度计数。在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];
    })

工作代码这里

希望这能有所帮助！