D3.js 缩放和平移中的线条svg数据映射问题

问：

我已经在图表上实现了缩放和平移功能，但我遇到了一个问题。缩放和平移时，x 和 y 刻度会正确调整，线条会按预期展开和收缩。但是，数据似乎正在映射到“行”。换言之，新的刻度值未应用于线条，从而导致不一致。当我将鼠标悬停在线上时，工具提示会显示一些数据，但是当我将鼠标悬停在线条之外时，问题就出现了，并且工具提示仍然显示数据。通过调试，我意识到数据没有正确映射到行。我对 d3.js 比较陌生，感谢您在解决问题方面的帮助。

在下面提供的示例代码中，缩放和平移功能似乎无法按预期工作。我分享这段代码是为了说明我使用的属性。但是，在我的实际项目中，缩放和平移可以正常工作。

预期结果我希望数据能够正确映射到具有新刻度值的线条，并且将鼠标悬停在线外不应显示工具提示数据。

实际结果数据未正确映射到具有新刻度值的线条，并且将鼠标悬停在线外会显示工具提示数据

const svgWidth = 488;
const svgHeight = 300;
const margin = {
    top: 18,
    left: 60,
    right: 35,
    bottom: 25,
};
const width = svgWidth - margin.left - margin.right;
const height = svgHeight - margin.bottom - margin.top;

const svg = d3.select("body").append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .append("g")
    .attr("transform", \`translate(${margin.left}, ${margin.top})\`);

const xScale = d3.scaleLinear()
    .domain(\[0, 200\])
    .range(\[0, width\]);

const yScale = d3.scaleLinear()
    .domain(\[0, 100\])
    .range(\[height, 0\]);

const xAxis = d3.axisBottom(xScale).ticks(10).tickSize(-height);
const yAxis = d3.axisLeft(yScale).ticks(5).tickSize(-width);

const zoomAndPan = d3.zoom()
    .scaleExtent(\[0.2, 5\])
    .translateExtent(\[\[-7808, -7090\], \[7000, 7800\])
    .on("zoom", (e) =\> {
        svg.selectAll("g.line").attr("transform", e.transform);
        svg.select(".x.axis").call(xAxis.scale(e.transform.rescaleX(xScale)));
        svg.select(".y.axis").call(yAxis.scale(e.transform.rescaleY(yScale)));
    });

svg.call(zoomAndPan);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", \`translate(0, ${height})\`)
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

const lineSVG = d3.line()
    .x((d) =\> xScale(d.x))
    .y((d) =\> yScale(d.y));

const data = \[
    { 'x': 1, 'y': 6 },
    { 'x': 2, 'y': 5 },
    { 'x': 3, 'y': 18 },
    // Add more data points here
\];

const lines = svg.append("g").attr("class", "lines");

lines.selectAll(".line-group")
    .data(\[data\])
    .enter()
    .append("g")
    .attr("class", "line-group")
    .append("path")
    .attr("class", "line")
    .attr("d", (d) =\> lineSVG(d))
    .style("stroke", "red")
    .style("opacity", 1.0);