D3.js D3线条图鼠标移动点位置错误

我想创建一个折线图，当我移动鼠标时，它将显示该点和该点数据。这是我的密码。但是我发现点的位置不正确。我不知道。谢谢你的帮助

这是我的密码。我使用D3V4

（功能折线图（）{
elementId='real\u monitor\u platform\u 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}]；
排序（（a，b）=>a[x]-b[x]）；
常量边距={
顶部：30，右侧：40，底部：120，左侧：60，
};
常数w=700；
常数h=300；
常量宽度=w+边距.左+边距.右；
常数高度=h+margin.top+margin.bottom；
常量formatTime=d3.timeFormat（“%Y-%m-%d%H:%m:%S”）；
const svg=d3.select（`${elementId}`）。append（'svg'））
.attr（'width'，width）
.attr（'高度'），高度，
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（“高度”，区域高度）；
常量xScale=d3.scaleTime（）
.domain（[xMin，xMax]）
.范围（[0，区域宽度]）；
const yScale=d3.scaleLinear（）.domain（[yMin，yMax]）.range（[areaHeight，0]）；
//创建轴对象
常数xAxis=d3.axisBottom（xScale）.ticks（宽度/100）；
常数yAxis=d3.axisLeft（yScale）；
常量行=d3.line（）
.x（d=>
xScale（d[x]），
).y（d=>
yScale（d[y]），
);
常数t=d3.transition（）
.持续时间（500）
.ease（d3.easeLinear）；
常量xGrooup=g.append（'g'）
.attr（'transform'，'translate（0，${areaHeight}）`）
.call（xAxis.tickFormat（formatTime）.ticks（3））；
常量yGroup=g.append（'g'）
.attr（'transform'，'translate（0,0'））
.呼叫（yAxis）；
g、 追加（'clipPath'）
.attr（'id'，'clip'）
.append（'rect'）
.attr（'width'，areaWidth）
.attr（“高度”，区域高度）；
常量平分日期=d3.平分线（d=>d.unixtime）。左；
const focus=g.append（'g'）
.attr（'class'，'focus'）
.style（“显示”、“无”）；
const circle=focus.append（'circle'）
.attr（'r'，4）
.style（'fill'，'#f3'）
.style（'stroke'，'#6F257F'）
.样式（“笔划宽度”、“1px”）；
const updateLine=g.append（'g'）
.attr（'类'，'图表'）
.selectAll（'行'）
.数据（[数据集]）；
const enterLine=updateLine.enter（）；
const exitLine=updateLine.exit（）；
const path=enterLine.append（'path'）
.attr（'clip-path'，'url（#clip'））
.attr（'类'，'行'）
.attr（'d'，行）
.attr（'填充'，'无'）
.attr（'stroke'，0）
.过渡（t）
.attr（'笔划宽度'，1）
.attr（'stroke'，'DodgerBlue'）；
exitLine.remove（）；
const zoom=d3.zoom（）
.scaleExtent（[1,80]）
.translateExtent（[[0,0]，[areaWidth，areaHeight]]
.打开（“缩放”，缩放）；
const zoomRect=svg.append（'rect'）
.attr（'width'，width）
.attr（'height'，height）
.attr（'transform'，'translate（0,0'））
.style（'填充'，'透明'）
.attr（'填充'，'无'）
.attr（'pointer-events'，'all'）
.呼叫（缩放）
.on（“mouseover”，function（）{focus.style（“display”，null）；}）
.on（“mouseout”，function（）{focus.style（“display”，“none”）；}）
.on（“mousemove”，mousemove）；
函数缩放（）{
const newxscale=d3.event.transform.rescaleX（xScale）；
xGrooup.call（xAxis.scale（newxscale））；
d3.select（`elementId}`）。select（'svg'）。select（'groups'）。select（'chart'））
.select（'path.line'）
.attr（'d'，line.x（d=>newxscale（d.unixtime））；
}
函数mousemove（）{
var transform=d3.zoomTransform（此）；
var xt=transform.rescaleX（xScale）；
var yt=变换重缩放（yScale）；
设g=d3。选择（“#组”）。_组[0][0]
var小鼠=d3.小鼠（g）；
var x0=xt.invert（鼠标[0]）；
var i=平分日期（数据集，x0，1）；
var d0=数据集[i-1]；
var d1=数据集[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]）}）`）；
}
})();
你必须考虑利润

所以，不是

const focus = svg.append('g')

。。。应该是：

const focus = g.append('g')

以下是更改后的代码：


（功能折线图（）{
elementId='real\u monitor\u platform\u 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}]；
排序（（a，b）=>a[x]-b[x]）；
常量边距={
顶部：30，右侧：40，底部：120，左侧：60，
};
常数w=700；
常数h=300；
常量宽度=w+边距.左+边距.右；
常数高度=h+margin.top+margin.bottom；
常数格式化时间