Round edges of line chart with step interpolation

[bjornevik]

Hi!

I need a line chart with rounded edges and step interpolation, à la:

According to the docs I see that

You can also provide a function if you need to adjust parameters for d3-shape curves or to use a custom curve function.

The link in the documentation doesn't seem to exist anymore, but I did find this page https://d3js.org/d3-shape/curve from it.

Is there a way to do this without messing around with custom interpolation? If not, any examples of using custom interpolation is appreciated.

[jpetera54]

Hey, I've this encountered issue recently. This is the way I solved it. I've found the source of stepAfter interpolation in the link you used - https://github.com/d3/d3-shape/blob/main/src/curve/step.js. I took this file as a base and then edited it. I needed to make some formatting changes so my eslint is happy, but don't worry, the functional change is marked with a comment.
This is what I ended up with. To change roundess of the curve you should be able just to change ROUND constant.

function Step(context, t) {
    this._context = context;
    this._t = t;
}
Step.prototype = {
    areaStart() {
        this._line = 0;
    },
    areaEnd() {
        this._line = NaN;
    },
    lineStart() {
        this._x = NaN;
        this._y = NaN;
        this._point = 0;
    },
    lineEnd() {
        if (this._t > 0 && 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(x, y) {
        x = +x;
        y = +y;
        switch (this._point) {
            case 0:
                this._point = 1;
                if (this._line) this._context.lineTo(x, y);
                else this._context.moveTo(x, y);
                break;

            case 1:
                this._point = 2; // falls through
            default: {
                if (this._t <= 0) {
                    this._context.lineTo(this._x, y);
                    this._context.lineTo(x, y);
                } else {
                    const x1 = this._x * (1 - this._t) + x * this._t;
                    //* This is the only edited part, other taken from https://github.com/d3/d3-shape/blob/main/src/curve/step.js
                    const ROUND = 3;
                    this._context.lineTo(x1 - ROUND, this._y);
                    this._context.quadraticCurveTo(
                        x1,
                        this._y,
                        x1,
                        this._y + (this._y > y ? -ROUND : ROUND),
                    );
                    //* This is the end of edited part
                    this._context.lineTo(x1, y);
                }
                break;
            }
        }
        this._x = x;
        this._y = y;
    },
};

export function step(context) {
    return new Step(context, 0.5);
}

export function stepBefore(context) {
    return new Step(context, 0);
}

export function stepAfter(context) {
    return new Step(context, 1);
}

Once you create this file, you can just import it to needed file, and use like this.

import { stepAfter } from './StepInterpolationFunction';

<V.VictoryLine
    data={secondLine}
    interpolation={stepAfter}
 />

Hopefully this helps someone in the future.