Reactjs 如何在 JS 中绘制具有不同笔画宽度的样条线

const data = [
  { x: 0, y: 80, r: 12 },
  { x: 100, y: 100, r: 30 },
  { x: 200, y: 30, r: 6 },
  { x: 300, y: 50, r: 8 },
  { x: 400, y: 40, r: 10 },
  { x: 500, y: 80, r: 12 },
];

const rValueByX = (x) => {
    if (x === data[0].x) {
    return data[0].r;
  }

  const index = data.findIndex(item => item.x >= x);
  const prevX = data[index - 1].x;
  const nextX = data[index].x;
  const delta = (x - prevX) / (nextX - prevX);
  const prevR = data[index - 1].r;
  const nextR = data[index].r;
  return (nextR - prevR) * delta + prevR;
}

// Set up the SVG container
const svgWidth = 600;
const svgHeight = 150;
const svg = d3.select('#graph-container')
  .append('svg')
  .attr('width', svgWidth)
  .attr('height', svgHeight);

const line = d3.line()
  .x((d) => d.x)
  .y((d) => d.y)
  .curve(d3.curveCardinal);
            
const path = svg.append('path')
  .attr('d', line(data))
  .attr('fill', 'none')
  .attr('stroke', 'green');
  
const total = path.node().getTotalLength();
const step = total / 100;

for (let len = 0; len <= total; len += step) {
  const fromLen = Math.max(0, len - step);
  const toLen = Math.min(len + step, total);
  const point = path.node().getPointAtLength(len);
  const r = rValueByX(point.x);
  const from = path.node().getPointAtLength(fromLen);
  const to = path.node().getPointAtLength(toLen);
  
  svg.append('line')
    .attr('x1', from.x)
    .attr('y1', from.y)
    .attr('x2', to.x)
    .attr('y2', to.y)
    .attr('stroke-width', r)
    .attr('stroke', 'green');
}

<script src="https://d3js.org/d3.v7.min.js"></script>
<div id="graph-container"/>