如何使用D3.js绘制带XY坐标的正切曲线？

正切曲线的核心难点在于它在π/2 + kπ（k为整数）位置存在渐近线，曲线不连续且分支独立，不能像正弦曲线那样用单一的line生成器直接绘制。下面是适配你现有代码的实现方案：

1. 调整比例尺适配正切值域 #

正切函数的值域是(-∞, +∞)，实际绘制时必须限制可视范围，避免数值过大超出画布。修改y轴比例尺：

// 将可视范围设为[-5, 5]，可根据画布大小调整
const yScale = scaleLinear()
  .domain([-5, 5])
  .range([height - 100, 0]);

2. 分分支管理数据 #

用二维数组存储各个连续分支的数据，避开渐近线附近的数值（防止计算出无穷大）：

// 存储各分支数据，对应0~π/2、π/2~3π/2、3π/2~2π三个分支
const tanData = [[], [], []];
// 渐近线位置和避开阈值
const asymptotes = [Math.PI/2, 3*Math.PI/2];
const epsilon = 0.01; // 避免计算到渐近线的小偏移量
let currentBranch = 0;
let currentValue = 0;

3. 调整动画逻辑实现分支切换 #

在定时器中判断当前数值是否接近渐近线，切换到下一个分支继续生成数据：

function updateTanData() {
  const nextValue = currentValue + (Math.PI * 2)/360;
  const currentAsymptote = asymptotes[currentBranch];

  // 接近渐近线时切换分支
  if (Math.abs(nextValue - currentAsymptote) < epsilon) {
    currentBranch++;
    if (currentBranch > 2) { // 完成一个周期后停止动画
      clearInterval(timer);
      return;
    }
    currentValue = currentAsymptote + epsilon;
  } else {
    currentValue = nextValue;
    tanData[currentBranch].push(currentValue);
  }

  renderTanCurves();
}

// 启动动画定时器
const timer = setInterval(updateTanData, 30);

4. 绘制多分支曲线 #

用D3的数据绑定功能，为每个分支单独生成path元素：

// 创建正切曲线的line生成器
const tanCurve = line<number>()
  .curve(curveMonotoneX)
  .x(d => xScale(d))
  .y(d => {
    const tanVal = Math.tan(d);
    // 截断超出可视范围的数值，避免曲线溢出画布
    return yScale(Math.max(-5, Math.min(5, tanVal)));
  });

// 渲染曲线的函数
function renderTanCurves() {
  const container = d3.select("#tan-curve-container");

  // 绑定分支数据到path元素
  const paths = container.selectAll("path")
    .data(tanData.filter(branch => branch.length > 0));

  // 添加新分支的path
  paths.enter()
    .append("path")
    .attr("stroke", "#2196F3")
    .attr("fill", "none")
    .attr("stroke-width", 2)
    .merge(paths)
    .attr("d", d => tanCurve(d));
}

关键注意点 #

• 避开渐近线：必须给渐近线位置留小偏移量，否则Math.tan()会返回无穷大，导致绘制异常。
• 值域截断：通过Math.max()和Math.min()限制正切值在可视范围内，保证曲线始终在画布中。
• 多分支绘制：每个连续分支对应独立的path元素，避免单一path跨越渐近线出现错误连线。

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