d3-shape Custom Curve Implementation

Modification of d3.curveStepBefore to round the corners. Code up for this stackoverflow question.

<!DOCTYPE html>
<html>

<body>
  <script>
    var width = 900,
      height = 500,
      N = 10;

var svg = d3.select('body')
      .append('svg')
      .attr('width', width)
      .attr('height', height);

var points = [];
    for (var i = 0; i < N; i++) {
      points.push({
        x: (width / N) * i + (width / N / 2),
        y: Math.random() * height
      });
    }

var line1 = d3.line()
      .x(function(d) {
        return d.x;
      })
      .y(function(d) {
        return d.y;
      })
      .curve(stepRound);

var line2 = d3.line()
      .x(function(d) {
        return d.x;
      })
      .y(function(d) {
        return d.y;
      })
      .curve(d3.curveStepBefore);

svg.append('path')
      .datum(points)
      .attr('d', line1)
      .attr('fill', 'none')
      .attr('stroke', 'orange')
      .attr('stroke-width', '4px');

svg.append('path')
      .datum(points)
      .attr('d', line2)
      .attr('fill', 'none')
      .attr('stroke', 'steelblue')
      .attr('stroke-width', '1px');
  </script>
</body>

</html>

https://d3js.org/d3.v4.min.js