D3 linechart mouse move point position is wrong - d3.js

Question

I want create a line chart, when I move mouse it'll show the point and this point data. This is my code. But I found the point position isn't correct. I have no idea. Thanks your help.
This is my code. I use d3 v4.
(function lineChart() {
elementId = 'real_monitor_platform_getBetAmount';
xMax = 1528170430000;
yMax = 8;
xMin = 1528170360000;
yMin = 0;
x = 'unixtime';
y = 'betAmount';
dataset = [{unixtime:1528170360000,betAmount:0},
{unixtime:1528170370000,betAmount:1},
{unixtime:1528170380000,betAmount:2},
{unixtime:1528170390000,betAmount:3},
{unixtime:1528170400000,betAmount:5},
{unixtime:1528170410000,betAmount:6},
{unixtime:1528170420000,betAmount:7},
{unixtime:1528170430000,betAmount:8}];
dataset.sort((a, b) => a[x] - b[x]);
const margin = {
top: 30, right: 40, bottom: 120, left: 60,
};
const w = 700;
const h = 300;
const width = w + margin.left + margin.right;
const height = h + margin.top + margin.bottom;
const formatTime = d3.timeFormat('%Y-%m-%d %H:%M:%S');
const svg = d3.select(`#${elementId}`).append('svg')
.attr('width', width)
.attr('height', height),
areaWidth = width - margin.left - margin.right,
areaHeight = svg.attr('height') - margin.top - margin.bottom,
g = svg.append('g')
.attr('id', 'group')
.attr('transform', `translate(${margin.left},${margin.top})`)
.attr('width', areaWidth)
.attr('height', areaHeight);
const xScale = d3.scaleTime()
.domain([xMin, xMax])
.range([0, areaWidth]);
const yScale = d3.scaleLinear().domain([yMin, yMax]).range([areaHeight, 0]);
// create axis objects
const xAxis = d3.axisBottom(xScale).ticks(width / 100);
const yAxis = d3.axisLeft(yScale);
const line = d3.line()
.x(d =>
xScale(d[x]),
).y(d =>
yScale(d[y]),
);
const t = d3.transition()
.duration(500)
.ease(d3.easeLinear);
const xGrooup = g.append('g')
.attr('transform', `translate(0,${areaHeight})`)
.call(xAxis.tickFormat(formatTime).ticks(3));
const yGroup = g.append('g')
.attr('transform', 'translate(0,0)')
.call(yAxis);
g.append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('width', areaWidth)
.attr('height', areaHeight);
const bisectDate = d3.bisector(d => d.unixtime).left;
const focus = g.append('g')
.attr('class', 'focus')
.style('display', 'none');
const circle = focus.append('circle')
.attr('r', 4)
.style('fill', '#F1F3F3')
.style('stroke', '#6F257F')
.style('stroke-width', '1px');
const updateLine = g.append('g')
.attr('class', 'chart')
.selectAll('line')
.data([dataset]);
const enterLine = updateLine.enter();
const exitLine = updateLine.exit();
const path = enterLine.append('path')
.attr('clip-path', 'url(#clip)')
.attr('class', 'line')
.attr('d', line)
.attr('fill', 'none')
.attr('stroke', 0)
.transition(t)
.attr('stroke-width', 1)
.attr('stroke', 'DodgerBlue');
exitLine.remove();
const zoom = d3.zoom()
.scaleExtent([1, 80])
.translateExtent([[0, 0], [areaWidth, areaHeight]])
.on('zoom', zoomed);
const zoomRect = svg.append('rect')
.attr('width', width)
.attr('height', height)
.attr('transform', 'translate(0,0)')
.style('fill', 'transparent')
.attr('fill', 'none')
.attr('pointer-events', 'all')
.call(zoom)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function zoomed() {
const new_xScale = d3.event.transform.rescaleX(xScale);
xGrooup.call(xAxis.scale(new_xScale));
d3.select(`#${elementId}`).select('svg').select('#group').select('.chart')
.select('path.line')
.attr('d', line.x(d => new_xScale(d.unixtime)));
}
function mousemove() {
var transform = d3.zoomTransform(this);
var xt = transform.rescaleX(xScale);
var yt = transform.rescaleY(yScale);
let g = d3.select("#group")._groups[0][0]
var mouse = d3.mouse(g);
var x0 = xt.invert(mouse[0]);
var i = bisectDate(dataset, x0, 1);
var d0 = dataset[i - 1];
var d1 = dataset[i];
var d = x0 - d0[x] > d1[x] - x0 ? d1 : d0;
circle.attr("transform", `translate(${transform.applyX(xScale(d[x]))},${transform.applyY(yScale(d[y]))})`);
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="real_monitor_platform_getBetAmount"></div>
edit
This is work for me.
(function lineChart() {
elementId = 'real_monitor_platform_getBetAmount';
xMax = 1528170430000;
yMax = 8;
xMin = 1528170360000;
yMin = 0;
x = 'unixtime';
y = 'betAmount';
dataset = [{unixtime:1528170360000,betAmount:0},
{unixtime:1528170370000,betAmount:1},
{unixtime:1528170380000,betAmount:2},
{unixtime:1528170390000,betAmount:3},
{unixtime:1528170400000,betAmount:5},
{unixtime:1528170410000,betAmount:6},
{unixtime:1528170420000,betAmount:7},
{unixtime:1528170430000,betAmount:8}];
dataset.sort((a, b) => a[x] - b[x]);
const margin = {
top: 30, right: 40, bottom: 120, left: 60,
};
const w = 700;
const h = 300;
const width = w + margin.left + margin.right;
const height = h + margin.top + margin.bottom;
const formatTime = d3.timeFormat('%Y-%m-%d %H:%M:%S');
const svg = d3.select(`#${elementId}`).append('svg')
.attr('width', width)
.attr('height', height),
areaWidth = width - margin.left - margin.right,
areaHeight = svg.attr('height') - margin.top - margin.bottom,
g = svg.append('g')
.attr('id', 'group')
.attr('transform', `translate(${margin.left},${margin.top})`)
.attr('width', areaWidth)
.attr('height', areaHeight);
const xScale = d3.scaleTime()
.domain([xMin, xMax])
.range([0, areaWidth]);
const yScale = d3.scaleLinear().domain([yMin, yMax]).range([areaHeight, 0]);
// create axis objects
const xAxis = d3.axisBottom(xScale).ticks(width / 100);
const yAxis = d3.axisLeft(yScale);
const line = d3.line()
.x(d =>
xScale(d[x]),
).y(d =>
yScale(d[y]),
);
const t = d3.transition()
.duration(500)
.ease(d3.easeLinear);
const xGrooup = g.append('g')
.attr('transform', `translate(0,${areaHeight})`)
.call(xAxis.tickFormat(formatTime).ticks(3));
const yGroup = g.append('g')
.attr('transform', 'translate(0,0)')
.call(yAxis);
g.append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('width', areaWidth)
.attr('height', areaHeight);
const bisectDate = d3.bisector(d => d.unixtime).left;
const focus = g.append('g')
.attr('class', 'focus')
.style('display', 'none');
const circle = focus.append('circle')
.attr('r', 4)
.style('fill', '#F1F3F3')
.style('stroke', '#6F257F')
.style('stroke-width', '1px');
const updateLine = g.append('g')
.attr('class', 'chart')
.selectAll('line')
.data([dataset]);
const enterLine = updateLine.enter();
const exitLine = updateLine.exit();
const path = enterLine.append('path')
.attr('clip-path', 'url(#clip)')
.attr('class', 'line')
.attr('d', line)
.attr('fill', 'none')
.attr('stroke', 0)
.transition(t)
.attr('stroke-width', 1)
.attr('stroke', 'DodgerBlue');
exitLine.remove();
const zoom = d3.zoom()
.scaleExtent([1, 80])
.translateExtent([[0, 0], [areaWidth, areaHeight]])
.on('zoom', zoomed);
const zoomRect = svg.append('rect')
.attr('width', width)
.attr('height', height)
.attr('transform', 'translate(0,0)')
.style('fill', 'transparent')
.attr('fill', 'none')
.attr('pointer-events', 'all')
.call(zoom)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function zoomed() {
const new_xScale = d3.event.transform.rescaleX(xScale);
xGrooup.call(xAxis.scale(new_xScale));
d3.select(`#${elementId}`).select('svg').select('#group').select('.chart')
.select('path.line')
.attr('d', line.x(d => new_xScale(d.unixtime)));
}
function mouseDate(scale) {
var g = d3.select("#group")._groups[0][0]
var x0 = scale.invert(d3.mouse(g)[0]),
i = bisectDate(dataset, x0, 1),
d0 = dataset[i - 1],
d1 = dataset[i],
d = x0 - d0[x] > d1[x] - x0 ? d1 : d0;
return d;
}
function mousemove() {
var transform = d3.zoomTransform(this);
var xt = transform.rescaleX(xScale);
var yt = transform.rescaleY(yScale);
d = mouseDate(xt);
console.log(transform.applyX(xScale(d[x])));
console.log(transform.applyY(yScale(d[y])));
circle.attr("transform", `translate(${transform.applyX(xScale(d[x]))},${(yScale(d[y]))})`);
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="real_monitor_platform_getBetAmount"></div>

Answer 1

You have to take the margins into account.
So, instead of...
const focus = svg.append('g')
... it should be:
const focus = g.append('g')
Here is the code with that change:
(function lineChart() {
elementId = 'real_monitor_platform_getBetAmount';
xMax = 1528170430000;
yMax = 8;
xMin = 1528170360000;
yMin = 0;
x = 'unixtime';
y = 'betAmount';
dataset = [{unixtime:1528170360000,betAmount:0},
{unixtime:1528170370000,betAmount:1},
{unixtime:1528170380000,betAmount:2},
{unixtime:1528170390000,betAmount:3},
{unixtime:1528170400000,betAmount:5},
{unixtime:1528170410000,betAmount:6},
{unixtime:1528170420000,betAmount:7},
{unixtime:1528170430000,betAmount:8}];
dataset.sort((a, b) => a[x] - b[x]);
const margin = {
top: 30, right: 40, bottom: 120, left: 60,
};
const w = 700;
const h = 300;
const width = w + margin.left + margin.right;
const height = h + margin.top + margin.bottom;
const formatTime = d3.timeFormat('%Y-%m-%d %H:%M:%S');
const svg = d3.select(`#${elementId}`).append('svg')
.attr('width', width)
.attr('height', height),
areaWidth = width - margin.left - margin.right,
areaHeight = svg.attr('height') - margin.top - margin.bottom,
g = svg.append('g')
.attr('id', 'group')
.attr('transform', `translate(${margin.left},${margin.top})`)
.attr('width', areaWidth)
.attr('height', areaHeight);
const xScale = d3.scaleTime()
.domain([xMin, xMax])
.range([0, areaWidth]);
const yScale = d3.scaleLinear().domain([yMin, yMax]).range([areaHeight, 0]);
// create axis objects
const xAxis = d3.axisBottom(xScale).ticks(width / 100);
const yAxis = d3.axisLeft(yScale);
const line = d3.line()
.x(d =>
xScale(d[x]),
).y(d =>
yScale(d[y]),
);
const t = d3.transition()
.duration(500)
.ease(d3.easeLinear);
const xGrooup = g.append('g')
.attr('transform', `translate(0,${areaHeight})`)
.call(xAxis.tickFormat(formatTime).ticks(3));
const yGroup = g.append('g')
.attr('transform', 'translate(0,0)')
.call(yAxis);
g.append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('width', areaWidth)
.attr('height', areaHeight);
const bisectDate = d3.bisector(d => d.unixtime).left;
const focus = g.append('g')
.attr('class', 'focus')
.style('display', 'none');
const circle = focus.append('circle')
.attr('r', 4)
.style('fill', '#F1F3F3')
.style('stroke', '#6F257F')
.style('stroke-width', '1px');
const updateLine = g.append('g')
.attr('class', 'chart')
.selectAll('line')
.data([dataset]);
const enterLine = updateLine.enter();
const exitLine = updateLine.exit();
const path = enterLine.append('path')
.attr('clip-path', 'url(#clip)')
.attr('class', 'line')
.attr('d', line)
.attr('fill', 'none')
.attr('stroke', 0)
.transition(t)
.attr('stroke-width', 1)
.attr('stroke', 'DodgerBlue');
exitLine.remove();
const zoom = d3.zoom()
.scaleExtent([1, 80])
.translateExtent([[0, 0], [areaWidth, areaHeight]])
.on('zoom', zoomed);
const zoomRect = svg.append('rect')
.attr('width', width)
.attr('height', height)
.attr('transform', 'translate(0,0)')
.style('fill', 'transparent')
.attr('fill', 'none')
.attr('pointer-events', 'all')
.call(zoom)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function zoomed() {
const new_xScale = d3.event.transform.rescaleX(xScale);
xGrooup.call(xAxis.scale(new_xScale));
d3.select(`#${elementId}`).select('svg').select('#group').select('.chart')
.select('path.line')
.attr('d', line.x(d => new_xScale(d.unixtime)));
}
function mousemove() {
var mouse = d3.mouse(this);
var x0 = xScale.invert(mouse[0]);
var i = bisectDate(dataset, x0);
var d0 = dataset[i - 1];
var d1 = dataset[i];
var d = x0 - d0[x] > d1[x] - x0 ? d1 : d0;
circle.attr("transform", `translate(${xScale(d[x])},${(yScale(d[y]))})`);
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="real_monitor_platform_getBetAmount"></div>
By the way, this won't work with the zoom... however, that's another issue.