How to add curved edge to d3 path lines?

user_5288560 0
Viewed 130

this is my result and code from this tutorial https://hashnode.com/post/radar-charts-with-d3js-ckiijv82n00dqm5s184e6acpy

enter image description here

 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");
    };

you see i have used stroke-linejoin but it seems to not work?

what i want to achieve is something like this: enter image description here

i am aware of curve function under line that i use but i cannot seem to get the right argument:

d3
 .line()
 .curve

any tips would be much appreciated

d3.js svg javascript
2 Answers

Use roundedPolygon function:

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" />

user_107564890

d3.line.curve() is the right way to do it. They way it works is to pass in a d3.curve into d3.line.curve(), so:

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

You can choose from a variety of curve types, which you can see in the link to the documentation above.

user_23916990
Related