如何在React中实现支持贝塞尔曲线的SVG坐标折线绘制功能？

1. 先搞定正负坐标的转换 #

SVG默认左上角是(0,0)，而且y轴是向下的，你的数据有正负值，直接用会出界，得先把坐标映射到SVG画布的可见区域：

• 先找出所有x值的最小/最大值，y值的最小/最大值
• 计算偏移量和缩放比例，把原始坐标转成SVG能识别的画布坐标
• 转换公式参考：

  // 假设svg画布宽高800x600，留50px边距
  function transform(rawData) {
    const xs = rawData.map(i => i.x);
    const ys = rawData.map(i => i.y);
    const minX = Math.min(...xs);
    const maxX = Math.max(...xs);
    const minY = Math.min(...ys);
    const maxY = Math.max(...ys);
    
    const usableW = 800 - 100; // 减去左右边距
    const usableH = 600 - 100; // 减去上下边距
    
    return rawData.map(item => {
      // x轴：从原始最小值偏移后缩放
      const svgX = 50 + (item.x - minX) * usableW / (maxX - minX);
      // y轴：翻转方向（SVG向下，原始数据向上）
      const svgY = 50 + (maxY - item.y) * usableH / (maxY - minY);
      return {...item, svgX, svgY};
    });
  }
  

2. 基础折线绘制 #

用SVG的<polyline>元素，把转换后的坐标拼成points属性就行：

<svg width="800" height="600">
  <!-- 可选：画个简易坐标轴 -->
  <line x1="50" y1="50" x2="750" y2="50" stroke="#ccc" />
  <line x1="50" y1="50" x2="50" y2="550" stroke="#ccc" />
  
  <!-- 数据折线 -->
  <polyline id="dataLine" fill="none" stroke="#2196F3" stroke-width="2" />
</svg>

然后用JS把数据塞进去：

// 你的原始数据示例
const rawData = [
  {x: -10, y:20, score:5},
  {x:0, y:-5, score:3},
  {x:20, y:15, score:7}
];

const transformed = transform(rawData);
const pointsStr = transformed.map(i => `${i.svgX},${i.svgY}`).join(' ');
document.getElementById('dataLine').setAttribute('points', pointsStr);

3. 鼠标跟随绘制效果 #

要实现随鼠标动画折线，监听鼠标事件实时更新点就行：

const svg = document.querySelector('svg');
const line = document.getElementById('dataLine');
let isDrawing = false;
let currentPoints = [];

// 鼠标按下开始绘制
svg.addEventListener('mousedown', (e) => {
  isDrawing = true;
  const rect = svg.getBoundingClientRect();
  // 获取SVG内的相对坐标
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  currentPoints.push(`${x},${y}`);
  line.setAttribute('points', currentPoints.join(' '));
});

// 鼠标移动时持续加点
svg.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;
  const rect = svg.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  currentPoints.push(`${x},${y}`);
  line.setAttribute('points', currentPoints.join(' '));
});

// 鼠标松开停止绘制
svg.addEventListener('mouseup', () => isDrawing = false);
document.addEventListener('mouseup', () => isDrawing = false);

4. 展示额外分数点 #

如果要把分数可视化，可以给每个坐标点加个圆点，用大小或颜色区分分数：

// 遍历转换后的数据，添加圆点
transformed.forEach(item => {
  const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  circle.setAttribute('cx', item.svgX);
  circle.setAttribute('cy', item.svgY);
  // 分数越高，圆点越大
  circle.setAttribute('r', 2 + item.score * 0.5);
  // 分数越高，颜色越偏红
  const hue = 120 - item.score * 10;
  circle.setAttribute('fill', `hsl(${hue}, 80%, 50%)`);
  svg.appendChild(circle);
});

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