如何将弯曲边缘添加到 d3 路径线？

Question

这是我在本教程中的结果和代码 https://hashnode.com/post/radar-charts-with-d3js-ckiijv82n00dqm5s184e6acpy

Await

你看到我使用了stroke-linejoin但它似乎不起作用？

我想要实现的是这样的：

我知道我使用的线下的曲线函数，但我似乎无法得到正确的参数：

 const drawPath = (
      points: [number, number][],
      parent: d3.Selection<SVGGElement, unknown, HTMLElement, any>
    ) => {
      const lineGenerator = d3
        .line()
        .x((d) => d[0])
        .y((d) => d[1]);

      parent
        .append("path")
        .attr("d", lineGenerator(points) as string)

        .attr("stroke-linejoin", "round");
    };

任何提示将不胜感激

Answer 1

使用roundedPolygon函数：

const roundedPolygon = (points, radius) => {
  const qb = [];
  for (let index = 0; index < points.length; index++) {
    const first = points[index];
    const second = points[(index + 1) % points.length];
    const distance = Math.hypot(first.x - second.x, first.y - second.y);
    const ratio = radius / distance;
    const dx = (second.x - first.x) * ratio;
    const dy = (second.y - first.y) * ratio;
    qb.push({x: first.x + dx, y: first.y + dy});
    qb.push({x: second.x - dx, y: second.y - dy});
  }
  
  let path = `M ${qb[0].x}, ${qb[0].y} L ${qb[1].x}, ${qb[1].y}`;
  for (let index = 1; index < points.length; index++) {
    path += ` Q ${points[index].x},${points[index].y} ${qb[index * 2].x}, ${qb[index * 2].y}`
    path += ` L ${qb[index * 2 + 1].x}, ${qb[index * 2 + 1].y}`;
  }
  path += ` Q ${points[0].x},${points[0].y} ${qb[0].x}, ${qb[0].y} Z`;
  return path;
}
  
  
const p = [{x: 50, y: 50}, {x: 250, y: 10}, {x: 220, y: 80}, {x: 300, y: 120}, {x: 220, y: 200}, {x: 180, y: 140}, {x: 90, y: 150}, {x: 100, y: 100}]  
const path = roundedPolygon(p, 20);

d3.select('svg')
  .append('path')
  .attr('d', path)
  .style('stroke', 'blue')
  .style('stroke-width', 5)
  .style('fill', 'none');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
<svg width="300" height="200" />

Answer 2

d3.line.curve() 是正确的做法。他们的工作方式是将 d3.curve 传入 d3.line.curve()，因此：

const lineGenerator = d3.line()
    .x((d) => d[0])
    .y((d) => d[1])
    .curve(d3.curveNatural);

您可以从多种曲线类型中进行选择，您可以在以上文档的链接中查看。