D3.js缩放时X轴重映射致折线偏移及越轴问题求助

我来帮你逐一排查并解决这两个问题：

问题1：首次缩放时折线突然向右偏移，右侧数据丢失 #

这个问题主要有两个核心原因：

1.1 缩放后路径更新误用了原始比例尺 #

你在zoom函数里已经基于缩放变换生成了新的x比例尺new_x，也定义了适配new_x的newline路径生成器，但最后更新折线路径时，却还是调用了依赖初始x比例尺的原始line函数——这直接导致缩放后的坐标没有被正确应用，折线自然会出现偏移。

修复方法：把zoom函数里最后更新路径的代码改成使用newline：

function zoom() { 
    console.log("zooming: " + d3.event.transform); 
    var new_x = d3.event.transform.rescaleX(x); 
    gX.call(d3.axisBottom(new_x)); 

    var newline = d3.line() 
        .x(function(d) { return new_x(d.date); }) 
        .y(function(d) { return y(d.poll); }); 
    // 改用适配新比例尺的newline生成路径
    pollPaths.attr("d", function(d) { return newline(d.avgpolls); }); 
} 

1.2 translateExtent滚动范围设置错误 #

你的SVG容器已经通过translate(" + margin.left + "," + margin.top + ")做了偏移，但translateExtent的左边界设为了0，这会限制缩放后的向左滚动范围，导致右侧部分数据无法被滚动查看。

修复方法：调整translateExtent的范围，让滚动边界能覆盖完整数据：

.call(d3.zoom() 
    .scaleExtent([1, 10]) 
    .translateExtent([[-margin.left, -Infinity], [width - margin.left + margin.right, Infinity]]) 
    .on("zoom", zoom) 
); 

问题2：缩放或滚动时折线显示在Y轴上方 #

SVG的元素显示层级完全由DOM绘制顺序决定——后添加的元素会覆盖前面的元素。你当前的代码是先绘制Y轴，再绘制折线，所以折线会显示在Y轴的上层。

修复方法：调整元素绘制顺序，先绘制折线，再绘制坐标轴，这样Y轴就会显示在折线上方，不会被遮挡：

// 先绘制折线相关元素
var party = svg.selectAll(".party")
    .data(poll_data)
    .enter()
    .append("g")
    .attr("class", "party");

var pollPaths = party.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.avgpolls); })
    .attr("fill", "none")
    .attr("stroke-width", 2)
    .style("stroke", function(d) { return returnPartyColour(d.party); });

// 再绘制坐标轴
var gX = svg.append("g")
    .attr("class", "axis xaxis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

var gY = svg.append("g")
    .attr("class", "axis yaxis")
    .call(yAxis);

把这些修改应用到你的代码后，应该就能解决这两个问题了。

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