demo.html

<script src="https://unpkg.com/d3-path"></script>
<script src="https://unpkg.com/d3-shape"></script>
<script src="https://unpkg.com/d3-curve-circlecorners"></script>
<style>
  svg {
    display: block;
    margin: 0.5em 0;
    background-color: #eee;
  }

  svg path {
    fill: none;
    stroke-width: 0.1;
  }

  svg path#first {
    stroke: red;
  }

  svg path#second {
    stroke: blue;
  }

  svg path#third {
    stroke: green;
  }

  svg path#fourth {
    stroke: purple;
  }
</style>

<h1><code>d3-curve-circlecorners</code> Demo Page</h1>

<h2>Multiple Segments, Longer than the Curve Radius (0.5)</h2>

<code> [ [2, 1], [2, 4], [0, 4], [2, 6], [4, 6], [6, 5] ]</code>

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.0"
  height="300px"
  viewBox="0 0 10 10"
>
  <path id="first" />
</svg>

<h2>Curve Radius Larger (3) than Some Segments</h2>
<p>Some nodes become quite sharp, at the expense of others</p>

<code> [ [2, 1], [2, 4], [0, 4], [2, 6], [4, 6], [6, 5] ]</code>

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.0"
  height="300px"
  viewBox="0 0 10 10"
>
  <path id="second" />
</svg>

<h2>Two Segments</h2>

<code> [ [-2, 1.15], [-3.15, 1.15], [-3.15, -1] ]</code>

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.0"
  height="300px"
  viewBox="-5 -5 10 10"
>
  <path id="third" />
</svg>

<h2>Overlapping Segments (BUG)</h2>

<code> [ [-1, -1], [-1, 0], [-1, -5], ]</code>

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.0"
  height="300px"
  viewBox="-5 -5 10 10"
>
  <path id="fourth" />
</svg>

<script>
  window.addEventListener('load', () => {
    const data = [
      [2, 1],
      [2, 4],
      [0, 4],
      [2, 6],
      [4, 6],
      [6, 5],
    ];

    const firstDrawing = d3.line().curve(circleCorners.radius(0.5))(data);
    const secondDrawing = d3.line().curve(circleCorners.radius(3))(data);
    const thirdDrawing = d3.line().curve(circleCorners.radius(0.65))([
      [-2, 1.15],
      [-3.15, 1.15],
      [-3.15, -1],
    ]);
    const fourthDrawing = d3.line().curve(circleCorners.radius(6))([
      [-1, -1],
      [-1, 0],
      [-1, -5],
    ]);

    document.getElementById('first').setAttribute('d', firstDrawing);
    document.getElementById('second').setAttribute('d', secondDrawing);
    document.getElementById('third').setAttribute('d', thirdDrawing);
    document.getElementById('fourth').setAttribute('d', fourthDrawing);
  });
</script>