Commit a07c6350 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

tooltip works (but is misplaced)

parent fc27b6d2
......@@ -39,3 +39,14 @@
.ac-scatter-axis .tick text {
font-size: 1.5em;
}
.ac-scatter-tooltip {
white-space: nowrap;
font-size: 0.75em;
position: absolute;
background: rgba(0,0,0,0.7);
pointer-events: none;
color: white;
padding: 0.5vh;
visibility: hidden;
}
......@@ -17,6 +17,9 @@ export default class extends Chart {
.append('svg')
.attr('class', 'ac-scatter-svg')
.append('g');
this.tooltip = d3.select(container)
.append('div')
.attr('class', 'ac-scatter-tooltip');
this.values = [];
this.callback = () => {};
......@@ -32,9 +35,9 @@ export default class extends Chart {
}
render({
values,
callback,
}) {
values,
callback,
}) {
this.values = typeof values === 'undefined' ? this.values : values;
this.callback = typeof callback === 'undefined' ? this.callback : callback;
......@@ -123,14 +126,27 @@ export default class extends Chart {
.attr('class', 'ac-scatter-brush')
.call(brush);
this.svg.on('mousemove', (d, i, nodes) => {
const [xPos, yPos] = d3.mouse(nodes[i]);
const ctx = this.hiddenCanvas.node().getContext('2d');
const [r, g, b] = ctx.getImageData(xPos, yPos, 1, 1).data;
const tooltip = this.colorToTooltipMap[`${r}:${g}:${b}`];
if (typeof tooltip === 'undefined') return; // background color
});
this.svg
.on('mousemove', (d, i, nodes) => {
const [xPos, yPos] = d3.mouse(nodes[i]);
const ctx = this.hiddenCanvas.node().getContext('2d');
const [r, g, b] = ctx.getImageData(xPos, yPos, 1, 1).data;
const tooltip = this.colorToTooltipMap[`${r}:${g}:${b}`];
if (typeof tooltip === 'undefined') {
this.tooltip
.style('visibility', 'hidden');
} else {
this.tooltip
.style('left', `${x}px`)
.style('top', `${y}px`)
.style('visibility', 'visible')
.html(tooltip);
}
})
.on('mouseleave', () => {
this.tooltip
.style('visibility', 'hidden');
});
const point = this.memory.selectAll('.ac-scatter-point')
.data(values);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment