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

工作代码在这里

希望这可以帮助！