D3 Examples - d3-shape Custom Curve Implementation

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  <script src="roundStep.js"></script>
</head>
​
<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>
    