如何解决d3.js不同版本间的兼容性问题？

核心问题分析 #

• 数据排序错误：d3.bisector要求数据按目标字段（此处为xpoint）升序排列，但你的数据是xpoint从10到1的降序，导致二分查找返回错误索引，最终选中无效数据，造成圆形位置异常。
• d3.pointer API 用法错误：D3 v6/v7中，d3.pointer需要传入事件对象而非元素本身，你代码里的d3.pointer(this)[0]会导致坐标计算错误。
• DOM结构无效：div#container放在<head>与<body>之间，属于非法位置，可能引发元素获取异常。

分步修复 #

1. 修正DOM结构 #

将容器移到<body>内部：

<body>
  <div id="container"></div>
  <!-- 其余代码 -->
</body>

2. 对数据按xpoint升序排序 #

const data = [
  {xpoint: 10, ypoint: 0.2},
  {xpoint: 4, ypoint: 1},
  {xpoint: 3, ypoint: 2},
  {xpoint: 2, ypoint: 3},
  {xpoint: 1, ypoint: 10}
].sort((a, b) => a.xpoint - b.xpoint);

3. 修复d3.pointer调用逻辑 #

修改mousemove函数，正确传递事件对象并优化数据点匹配：

function mousemove(event) {
  const x0 = x.invert(d3.pointer(event)[0]);
  // 限制索引范围，避免越界
  const i = bisect(data, x0, 1, data.length - 1);
  // 选择距离鼠标位置更近的数据点
  const selectedData = Math.abs(x0 - data[i-1].xpoint) < Math.abs(x0 - data[i].xpoint) ? data[i-1] : data[i];
  
  focus
    .attr("cx", x(selectedData.xpoint))
    .attr("cy", y(selectedData.ypoint));
  focusText
    .html(`x: ${selectedData.xpoint}  -  y: ${selectedData.ypoint}`)
    .attr("x", x(selectedData.xpoint) + 15)
    .attr("y", y(selectedData.ypoint));
}

4. 调整事件绑定参数 #

绑定mousemove时传递事件对象：

svg.append('rect')
  // ...其他属性
  .on('mousemove', (event) => mousemove(event));

完整修复代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Interactive Curve Chart</title>
</head>
<body>
  <div id="container"></div>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script type="module">
    // 数据按xpoint升序排序
    const data = [
      {xpoint: 10, ypoint: 0.2},
      {xpoint: 4, ypoint: 1},
      {xpoint: 3, ypoint: 2},
      {xpoint: 2, ypoint: 3},
      {xpoint: 1, ypoint: 10}
    ].sort((a, b) => a.xpoint - b.xpoint);

    // 图表尺寸和边距
    const width = 640;
    const height = 400;
    const marginTop = 20;
    const marginRight = 20;
    const marginBottom = 30;
    const marginLeft = 40;

    // X轴对数比例尺
    const x = d3.scaleLog()
      .domain([0.2, 60])
      .range([marginLeft, width - marginRight]);

    // Y轴对数比例尺
    const y = d3.scaleLog()
      .domain([0.1, 100])
      .range([height - marginBottom, marginTop]);

    // 曲线生成器
    const line = d3.line()
      .x(d => x(d.xpoint))
      .y(d => y(d.ypoint))
      .curve(d3.curveCatmullRom.alpha(0.5));

    // 创建SVG容器
    const svg = d3.create("svg")
      .attr("width", width)
      .attr("height", height);

    // 添加X轴
    svg.append("g")
      .attr("transform", `translate(0,${height - marginBottom})`)
      .call(d3.axisBottom(x));

    // 添加Y轴
    svg.append("g")
      .attr("transform", `translate(${marginLeft},0)`)
      .call(d3.axisLeft(y));

    // 添加曲线路径
    svg.append("path")
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", line(data));

    // 二分查找器，匹配鼠标位置对应的数据点
    const bisect = d3.bisector(d => d.xpoint).left;

    // 创建跟随鼠标的圆形提示点
    const focus = svg
      .append('g')
      .append('circle')
      .style("fill", "none")
      .attr("stroke", "black")
      .attr('r', 8.5)
      .style("opacity", 0);

    // 创建跟随鼠标的文本标签
    const focusText = svg
      .append('g')
      .append('text')
      .style("opacity", 0)
      .attr("text-anchor", "left")
      .attr("alignment-baseline", "middle");

    // 捕获鼠标事件的透明矩形
    svg.append('rect')
      .style("fill", "none")
      .style("pointer-events", "all")
      .attr('width', width)
      .attr('height', height)
      .on('mouseover', () => {
        focus.style("opacity", 1);
        focusText.style("opacity", 1);
      })
      .on('mousemove', (event) => {
        const x0 = x.invert(d3.pointer(event)[0]);
        const i = bisect(data, x0, 1, data.length - 1);
        const selectedData = Math.abs(x0 - data[i-1].xpoint) < Math.abs(x0 - data[i].xpoint) ? data[i-1] : data[i];
        
        focus
          .attr("cx", x(selectedData.xpoint))
          .attr("cy", y(selectedData.ypoint));
        focusText
          .html(`x: ${selectedData.xpoint}  -  y: ${selectedData.ypoint}`)
          .attr("x", x(selectedData.xpoint) + 15)
          .attr("y", y(selectedData.ypoint));
      })
      .on('mouseout', () => {
        focus.style("opacity", 0);
        focusText.style("opacity", 0);
      });

    // 将SVG添加到容器
    container.append(svg.node());
  </script>
</body>
</html>

版本兼容说明 #

• D3 v7：修复后可正常运行，圆形与标签会跟随鼠标沿曲线移动。
• D3 v6：无需额外修改，上述代码可直接兼容运行。

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