I'm facing an issue with a mouseover tooltip in Observable that seems to fail when I transfer it to a Grafana plugin using React, D3, and Typescript.
The technique I followed can be found in this article: Link to Article
To simplify the code and debug, I have stripped it down to this basic structure with comprehensive console.log statements:
const mouseGroup = chart
.append('g')
.attr('fill', 'none')
.attr('pointer-events', 'all');
const foobar = mouseGroup
.selectAll('rect')
.data<[number, number]>(plainArray)
.join('rect')
.attr('x', d => {
console.log('d in x', d);
console.log('xScale', xScale(d[0]));
return xScale(d[0]);
})
.attr('y', d => yScale(d[1]))
.attr('height', height)
.attr('width', '5') // Hard-coded during debugging.
.on('mouseover', (d, i) => {
console.log(d, i);
console.log(plainArray);
tooltip.show(d);
})
.on('mouseout', () => tooltip.hide());
When hovering over a rect, I expect to see the d data displayed like [123, 456], but instead, it only shows a small integer. The first rect at index 0 has a d value of 4, which is not the expected output.
Despite some type errors, the main issue appears to lie within the console.log(d, i) statement as showcased here:
https://i.sstatic.net/NsEMt.png
In an attempt to understand why .attr() displays the correct d data while .on() provides a different simplistic integer, I introduced additional logging for .attr('x', d => ... revealing the expected d data:
https://i.sstatic.net/X9tGY.png
The constant values of d in .on('mouseover', (d, i) => { remain consistent and unexpected:
i=0, d=4
i=1, d=8
i=2, d=15
i=3, d=16
i=4, d=23
i=5, d=42
The functionality works fine in Observable, leading me to question if Grafana could potentially interfere with the mouseover and d parameters?
A simple test where I changed the rect fill color to "yellow" upon mouseover worked correctly, proving the execution of my mouseover function. Additionally, all console.log statements trigger as intended when hovering over each rect.
An intriguing observation is that although plainArray contains 312 elements, I can only view the first six when inspecting the DOM. Surprisingly, numerous console.log outputs from .attr('x', ...) are generated.
The contents of plainArray are detailed below: