D3.js地图绘制像素坐标点定位错位问题求助

• 不必要的坐标缩放导致拉伸错位：你持有的xVal/yVal本身就是与底图一一对应的像素坐标，不需要额外经过线性比例尺转换。当前代码用数据本身的极值设置比例尺domain，相当于把数据范围内的坐标强制拉伸到整个SVG画布宽度，彻底破坏了原始像素坐标的对应关系，是点位错位的核心原因。
• SVG内边距导致整体偏移：CSS中给svg元素设置了padding: 30px，背景图会随内边距产生偏移，但你绘制的路径、圆点基于SVG内部坐标系（原点在SVG内容区域左上角，已包含padding偏移），两者原点不匹配导致所有点位整体偏移30px。
• 冗余代码的潜在干扰：代码中调用了未定义的xAxis/yAxis，不存在的对象调用会抛出JS错误，可能中断后续绘制逻辑，同时坐标轴本身也不是地图绘制需要的元素。

• 移除冗余的比例尺转换：直接使用原始xVal/yVal作为绘制坐标，不需要再套x()/y()方法做转换。
• 移除SVG的padding设置：删除CSS中svg选择器下的padding: 30px属性，保证背景图原点与SVG绘制坐标系原点完全重合。如果需要画布边距，改为给body设置margin，或者新增一层g容器做整体偏移，同时给所有绘制坐标同步加上对应偏移量。
• 修正比例尺配置（如需保留比例尺能力）：如果后续需要做缩放平移交互，必须将比例尺的domain设置为和range完全匹配，即x.domain([0, width])、y.domain([height, 0])，不要用数据的极值设置domain，此时x(d.xVal)的输出就等于d.xVal本身。
• 删除冗余的坐标轴代码：移除所有与xAxis、yAxis相关的调用和定义逻辑，避免JS报错干扰正常绘制。

核心代码修改示例 #

// 直接删除x、y比例尺定义，或者修改比例尺domain为：
var x = d3.scaleLinear().range([0, width]).domain([0, width]);
var y = d3.scaleLinear().range([height, 0]).domain([height, 0]);

// valueline的x、y回调直接返回原始值，或者保留x()/y()调用（已修正domain的情况下）
var valueline = d3.line()
    .defined(function(d) {
        return d.yVal != -1;
    })
    .x(function (d) {
        return d.xVal;
    })
    .y(function (d) {
        return d.yVal;
    })
    .curve(d3.curveMonotoneX)

// 圆点坐标也直接使用原始值
svg.selectAll('circle')
    .data(data.filter(function(d) {
        return d.yVal != -1;
    }))
    .enter().append('circle')
      .attr('r', 5)
      .attr('cx', function (d) {
        return d.xVal;
      })
      .attr('cy', function (d) {
        return d.yVal;
      })

svg {
    background-image: url("对应底图地址");
    /* 删掉原有padding:30px */
    padding: 0;
}

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