D3.js：缩放平移时位置标记线不随图表同步移动的解决方案求助

1. D3.js图表中的红色垂直线用于标记滑块控制的x变量位置，但缩放/平移图表时，垂直线无法随刻度和内容同步移动。
2. 与页面滑块或乘数输入框交互时，图表缩放级别会被意外重置。

解决方案1：修复缩放平移时垂直线同步问题 #

问题根源是缩放时你用了临时变换后的比例尺，但更新垂直线仍调用原始比例尺，导致位置错位。具体修改步骤：

1. 新增全局变量存储当前生效的x比例尺：

let x; // 原始基础x比例尺
let currentXScale; // 实时生效的x比例尺（包含缩放/平移变换）
let y; // y比例尺
// ...保留其他原有变量

2. 在初始化图表时，同步初始化currentXScale：

function drawGraph() {
    // ...原有代码
    x = d3.scaleLinear()
        .domain([0, 30])
        .range([0, width]);
    currentXScale = x.copy(); // 同步初始比例尺
    // ...其他原有代码
    updateVerticalLine();
}

3. 修改缩放处理函数，更新currentXScale并用来计算垂直线位置：

function handleZoom(event) {
    currentXScale = event.transform.rescaleX(x);
    const new_y = event.transform.rescaleY(y);

    xAxis.call(d3.axisBottom(currentXScale));
    yAxis.call(d3.axisLeft(new_y));

    graphArea.selectAll(".real-line")
        .attr("d", d3.line()
            .x(d => currentXScale(d.x))
            .y(d => new_y(d.y)));

    graphArea.selectAll(".imaginary-line")
        .attr("d", d3.line()
            .x(d => currentXScale(d.x))
            .y(d => new_y(d.y * +yImagMultipInput.value)));

    // 直接更新垂直线位置，无需调用updateVerticalLine
    const currentX = +slider.value;
    graphArea.selectAll(".current-line")
        .attr("x1", currentXScale(currentX))
        .attr("x2", currentXScale(currentX));
}

4. 修改updateVerticalLine函数，使用currentXScale计算位置：

function updateVerticalLine() {
    const currentX = +slider.value;
    const verticalLine = graphArea.selectAll(".current-line").data([currentX]);

    verticalLine.enter()
        .append("line")
        .attr("class", "current-line")
        .attr("stroke", "red")
        .attr("stroke-width", 1)
        .attr("stroke-dasharray", "4")
        .merge(verticalLine)
        .attr("x1", currentXScale(currentX))
        .attr("x2", currentXScale(currentX))
        .attr("y1", height)
        .attr("y2", 0);
}

解决方案2：修复控件交互重置缩放级别的问题 #

问题原因是控件事件调用了drawGraph()，该函数会重新创建原始比例尺，直接重置所有图表状态。修改方法是拆分初始化和更新逻辑：

1. 将drawGraph拆分为初始化和局部更新函数：

// 仅在页面加载时执行一次，初始化图表基础结构
function initGraph() {
    // 初始化基础比例尺
    x = d3.scaleLinear()
        .domain([0, 30])
        .range([0, width]);
    currentXScale = x.copy();

    y = d3.scaleLinear()
        .domain([-50, 250])
        .range([height, 0]);

    // 创建坐标轴容器
    xAxis = graphArea.append("g")
        .attr("class", "x-axis")
        .attr("transform", `translate(0,${height})`)
        .call(d3.axisBottom(x));

    yAxis = graphArea.append("g")
        .attr("class", "y-axis")
        .call(d3.axisLeft(y));

    // 创建曲线容器
    graphArea.append("path")
        .attr("fill", "none")
        .attr("stroke", "blue")
        .attr("class", "real-line");

    graphArea.append("path")
        .attr("fill", "none")
        .attr("stroke", "orange")
        .attr("class", "imaginary-line");

    updateVerticalLine();
}

// 仅更新图表内容，不重置比例尺和缩放状态
function updateGraph() {
    // 更新曲线
    graphArea.selectAll(".real-line")
        .attr("d", d3.line()
            .x(d => currentXScale(d.x))
            .y(d => y(d.y)));

    graphArea.selectAll(".imaginary-line")
        .attr("d", d3.line()
            .x(d => currentXScale(d.x))
            .y(d => y(d.y * +yImagMultipInput.value)));

    // 更新坐标轴
    xAxis.call(d3.axisBottom(currentXScale));
    yAxis.call(d3.axisLeft(y));

    updateVerticalLine();
}

2. 修改控件事件监听，调用updateGraph()替代drawGraph()：

slider.addEventListener("input", function () {
    const xVal = parseFloat(this.value).toFixed(2);
    xValue.textContent = xVal;

    const yVal = fibonacci(xVal);
    yValue.textContent = math.format(yVal, { precision: 5 });
    yReal.textContent = math.format(math.re(yVal), { precision: 5 });
    const imaginaryPart = math.im(yVal);
    yImag.textContent = math.format(imaginaryPart, { precision: 5 });
    yImagDec.textContent = math.format(imaginaryPart, { precision: 15, notation: 'fixed' });
    
    if (imaginaryPart == 0) {
        yImag.textContent = "0";
        yImagDec.textContent = "0";
    }

    updateGraph(); // 仅更新内容，保留缩放状态
});

yImagMultipInput.addEventListener("input", updateGraph);

3. 修改页面初始化代码，调用initGraph()：

updateData(); // 生成数据
initGraph(); // 初始化图表

内容的提问来源于stack exchange，提问作者Mentalist