Подсказка для холста D3 Heatmap

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

Рабочий код здесь

Надеюсь это поможет!