d3.js - tooltips not following mouse position - d3.js

Question

var tooltip = d3.select('body').append("div")
.attr("class", "tooltip")
.style('position','absolute')
.style("opacity", 0);
tooltip.append("rect")
.attr("width", 60)
.attr("height", 20)
.attr("fill", "red")
.style("opacity", 0.5);
tooltip.append("text")
.attr("x", 30)
.attr("y", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
// Prep the tooltip bits, initial display is hidden
var margin = {top: 20, right: 30, bottom: 50, left: 30};
var width = 950;
var height = 400;
var svg = d3.select('body')
.append('svg')
.attr('width',width)
.attr('height',height)
.style('border','2px solid red')
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.2);
var x1 = d3.scaleBand()
.padding(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["cornflowerblue", "orangered"]);
var data = `Age_Group,Male,Female
Under 5 years,0.064,0.059
5 to 9 years,0.066,0.062
10 to 14 years,0.067,0.062
15 to 19 years,0.069,0.064
20 to 24 years,0.073,0.067
25 to 29 years,0.071,0.067
30 to 34 years,0.069,0.066
35 to 39 years,0.065,0.063
40 to 44 years,0.064,0.063
45 to 49 years,0.065,0.064
50 to 54 years,0.069,0.07
55 to 59 years,0.066,0.068
60 to 64 years,0.058,0.062
65 to 69 years,0.048,0.052
70 to 74 years,0.034,0.038
75 to 79 years,0.023,0.028
80 to 84 years,0.015,0.021
85 years and over,0.013,0.025
`
var data = d3.csvParse(data,function(d, i, columns) {
for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
return d;
})
plot_histgram(data)
function plot_histgram(data) {
var keys = data.columns.slice(1);
x0.domain(data.map(function(d) { return d.Age_Group; }));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();
g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + x0(d.Age_Group) + ",0)"; })
.selectAll("rect")
.data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
.enter().append("rect").attr("class", "rect")
.attr("x", function(d) { return x1(d.key); })
.attr("y", function(d) { return y(d.value); })
.attr("width", x1.bandwidth())
.attr("height", function(d) { return height - y(d.value); })
.attr("fill", function(d) { return z(d.key); })
.on("mouseover", function() { tooltip.style("opacity", 1); })
.on("mousemove", function(event,d) {
var coords = d3.pointer(event);
var xPos = coords[0] + 10;
var yPos = coords[1] - 5;
tooltip
.style("left", xPos + "px")
.style("top", yPos + "px")
.text(d.value);
})
.on("mouseout", function() {
tooltip.style("opacity", 0);
});
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.1em")
.attr("transform", "rotate(-45)" );
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, ".0%"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Percentage");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) { return d; });
}
svg {
width: 100%;
height: 100%;
position: center;
}
#hist_sexage {
background-color: lightgrey;
}
.rect:hover {
fill: yellow;
}
.tooltip {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
width: auto;
height: auto;
background: none repeat scroll 0 0 lightblue;
border: 0 none;
border-radius: 8px 8px 8px 8px;
box-shadow: -3px 3px 15px #888888;
color: blue;
font: 12px sans-serif;
padding: 5px;
text-align: center;
}
<script src="https://d3js.org/d3.v7.min.js"></script>
Below example, the tooltip not move with mouse!

Answer 1

Use event.offsetX / offsetY instead of d3.pointer(event):
var tooltip = d3.select('body').append("div")
.attr("class", "tooltip")
.style('position','absolute')
.style("opacity", 0);
tooltip.append("rect")
.attr("width", 60)
.attr("height", 20)
.attr("fill", "red")
.style("opacity", 0.5);
tooltip.append("text")
.attr("x", 30)
.attr("y", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
// Prep the tooltip bits, initial display is hidden
var margin = {top: 20, right: 30, bottom: 50, left: 30};
var width = 950;
var height = 400;
var svg = d3.select('body')
.append('svg')
.attr('width',width)
.attr('height',height)
.style('border','2px solid red')
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.2);
var x1 = d3.scaleBand()
.padding(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["cornflowerblue", "orangered"]);
var data = `Age_Group,Male,Female
Under 5 years,0.064,0.059
5 to 9 years,0.066,0.062
10 to 14 years,0.067,0.062
15 to 19 years,0.069,0.064
20 to 24 years,0.073,0.067
25 to 29 years,0.071,0.067
30 to 34 years,0.069,0.066
35 to 39 years,0.065,0.063
40 to 44 years,0.064,0.063
45 to 49 years,0.065,0.064
50 to 54 years,0.069,0.07
55 to 59 years,0.066,0.068
60 to 64 years,0.058,0.062
65 to 69 years,0.048,0.052
70 to 74 years,0.034,0.038
75 to 79 years,0.023,0.028
80 to 84 years,0.015,0.021
85 years and over,0.013,0.025
`
var data = d3.csvParse(data,function(d, i, columns) {
for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
return d;
})
plot_histgram(data)
function plot_histgram(data) {
var keys = data.columns.slice(1);
x0.domain(data.map(function(d) { return d.Age_Group; }));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();
const bars = g.append("g")
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d) { return "translate(" + x0(d.Age_Group) + ",0)"; })
bars.selectAll("rect")
.data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
.enter().append("rect").attr("class", "rect")
.attr("x", function(d) { return x1(d.key); })
.attr("y", function(d) { return y(d.value); })
.attr("width", x1.bandwidth())
.attr("height", function(d) { return height - y(d.value); })
.attr("fill", function(d) { return z(d.key); })
.on("mouseover", function() { tooltip.style("opacity", 1); })
.on("mousemove", function(e,d) {
// console.log('E:', event.offsetX);
var coords = d3.pointer(e);
var xPos = coords[0] + 10;
var yPos = coords[1] - 5;
tooltip
.style("left", event.offsetX + "px")
.style("top", yPos + "px")
.text(d.value);
})
.on("mouseout", function() {
tooltip.style("opacity", 0);
});
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.1em")
.attr("transform", "rotate(-45)" );
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, ".0%"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Percentage");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) { return d; });
}
svg {
width: 100%;
height: 100%;
position: center;
}
#hist_sexage {
background-color: lightgrey;
}
.rect:hover {
fill: yellow;
}
.tooltip {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
width: auto;
height: auto;
background: none repeat scroll 0 0 lightblue;
border: 0 none;
border-radius: 8px 8px 8px 8px;
box-shadow: -3px 3px 15px #888888;
color: blue;
font: 12px sans-serif;
padding: 5px;
text-align: center;
}
<script src="https://d3js.org/d3.v7.min.js"></script>