d3.js 自定义曲线步圆答案

【问题标题】：d3.js custom curve step roundd3.js 自定义曲线步圆
【发布时间】：2017-04-05 09:05:44
【问题描述】：

我正在处理带有 x 和 y 轴的 d3.js .v4 图表，我需要您的帮助。

说明：

xAxis 是线性缩放的，上面有路径，就像这张图片一样。

我被困在这里，找不到像这张图片path with rounded corner这样的路径的解决方案@

这是我的线函数代码

    // the path generator for the line chart
line = d3.line()
  .x(function(d, i) {
    return xScale(i);
  })
  .y(function(d, i) {
    return yScale(d);
  })
  .curve(d3.curveStep);

我尝试使用 cardinal、monotone 和 catmull 但无法归档所需的路径。

d3.curveStep 是否可以圆角？

【问题讨论】：

标签： javascript d3.js svg rounded-corners

【解决方案1】：

我终于找到时间回到这个问题。这是实施custom curve 的绝佳机会。我基本上将源代码偷到了d3.curveStepBefore 并进行了修改以满足您的要求。

function Step(context, t) {
  this._context = context;
  this._t = t;
}

Step.prototype = {
  areaStart: function() {
    this._line = 0;
  },
  areaEnd: function() {
    this._line = NaN;
  },
  lineStart: function() {
    this._x = this._y = NaN;
    this._point = 0;
  },
  lineEnd: function() {
    if (0 < this._t && this._t < 1 && this._point === 2) this._context.lineTo(this._x, this._y);
    if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();
    if (this._line >= 0) this._t = 1 - this._t, this._line = 1 - this._line;
  },
  point: function(x, y) {
    x = +x, y = +y;
    switch (this._point) {
      case 0:
      case 0:
        this._point = 1;
        this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
        break;
      case 1:
        this._point = 2; // proceed
      default:
        {
          var xN, yN, mYb, mYa;
          if (this._t <= 0) {
            xN = Math.abs(x - this._x) * 0.25;
            yN = Math.abs(y - this._y) * 0.25;
            mYb = (this._y < y) ? this._y + yN : this._y - yN;
            mYa = (this._y > y) ? y + yN : y - yN;

            this._context.quadraticCurveTo(this._x, this._y, this._x, mYb);
            this._context.lineTo(this._x, mYa);
            this._context.quadraticCurveTo(this._x, y, this._x + xN, y);
            this._context.lineTo(x - xN, y);

          } else {
            var x1 = this._x * (1 - this._t) + x * this._t;

            xN = Math.abs(x - x1) * 0.25;
            yN = Math.abs(y - this._y) * 0.25;
            mYb = (this._y < y) ? this._y + yN : this._y - yN;
            mYa = (this._y > y) ? y + yN : y - yN;

            this._context.quadraticCurveTo(x1, this._y, x1, mYb);
            this._context.lineTo(x1, mYa);
            this._context.quadraticCurveTo(x1, y, x1 + xN, y);
            this._context.lineTo(x - xN, y);
          }
          break;
        }
    }
    this._x = x, this._y = y;
  }
};

stepRound = function(context) {
  return new Step(context, 0.5);
};

stepRoundBefore = function(context) {
  return new Step(context, 0);
};

stepRoundAfter = function(context) {
  return new Step(context, 1);
};

<!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>
</head>

<body>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {

      var width = 500,
        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.curveStep);

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

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

    });
  </script>
</body>

</html>

【讨论】：

感谢马克的宝贵时间！这就是我需要的。现在我需要弄清楚如何为curveStep编辑这段代码。当前的curveStepBefore（四舍五入）推动我的线路径与背景虚线网格对齐，但路径需要在该网格之间。
@djstojadin，请参阅更新的答案。我实现了curveStep 和curveStepAfter。
优秀！你真好。
@GerardoFurtado，谢谢。在d3.js 标签上很难跟上你的步伐：)