Nonchalant Programming Master

    d3-interpolate-path
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/d3-interpolate-path package

    2.2.3 • Public • Published

    d3-interpolate-path

    npm version

    d3-interpolate-path is a zero-dependency that adds an interpolator optimized for SVG <path> elements. It can also work directly with object representations of path commands that can be later interpreted for use with canvas or WebGL.

    Note this package no longer has a dependency on d3 or d3-interpolate, but in web usage adds itself to the d3 namespace like other d3 plugins do.

    Blog: Improving D3 Path Animation

    Demo: https://pbeshai.github.io/d3-interpolate-path/

    d3-interpolate-path demo

    Example Usage

    var line = d3.line()
      .curve(d3.curveLinear)
      .x(function (d) { return x(d.x); })
      .y(function (d) { return y(d.y); });
    
    d3.select('path.my-path')
      .transition()
      .duration(2000)
      .attrTween('d', function (d) {
        var previous = d3.select(this).attr('d');
        var current = line(d);
        return d3.interpolatePath(previous, current);
      });

    If you're using it in a module environment, you can import it as follows:

    import { interpolatePath } from 'd3-interpolate-path';

    Otherwise, you can use it via a <script> tag as follows:

    <script src="https://unpkg.com/d3-interpolate-path/build/d3-interpolate-path.min.js"></script>

    Development

    Get rollup watching for changes and rebuilding

    npm run watch

    Run a web server in the docs directory

    cd docs
    php -S localhost:8000

    Go to http://localhost:8000

    Installing

    If you use NPM, npm install d3-interpolate-path. Otherwise, download the latest release.

    API Reference

    # interpolatePath(a, b, excludeSegment)

    Returns an interpolator between two path attribute d strings a and b. The interpolator extends a and b to have the same number of points before applying linear interpolation on the values. It uses De Castlejau's algorithm for handling bezier curves.

    var pathInterpolator = interpolatePath('M0,0 L10,10', 'M10,10 L20,20 L30,30')
    pathInterpolator(0)   // 'M0,0 L10,10 L10,10'
    pathInterpolator(0.5) // 'M5,5 L15,15 L20,20'
    pathInterpolator(1)   // 'M10,10 L20,20 L30,30'

    You can optionally provide a function excludeSegment that takes two adjacent path commands and returns true if that segment should be excluded when splitting the line. A command object has form { type, x, y } (with possibly more attributes depending on type). An example object:

    // equivalent to M0,150 in a path `d` string
    {
      type: 'M',
      x: 0,
      y: 150
    }

    This is most useful when working with d3-area. Excluding the final segment (i.e. the vertical line at the end) from being split ensures a nice transition. If you know that highest x value in the path, you can exclude the final segment by passing an excludeSegment function similar to:

    function excludeSegment(a, b) {
      return a.x === b.x && a.x === 300; // here 300 is the max X
    }

    # interpolatePathCommands(aCommands, bCommands, excludeSegment)

    Returns an interpolator between two paths defined as arrays of command objects a and b. The interpolator extends a and b to have the same number of points if they differ. This can be useful if you want to work with paths in other formats besides SVG (e.g. canvas or WebGL).

    Command objects take the following form:

    | { type: 'M', x: number, y: number },
    | { type: 'L', x, y }
    | { type: 'H', x }
    | { type: 'V', y }
    | { type: 'C', x1, y1, x2, y2, x, y }
    | { type: 'S', x2, y2, x, y }
    | { type: 'Q', x1, y1, x, y }
    | { type: 'T', x, y }
    | { type: 'A', rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y }
    | { type: 'Z' }

    Example usage:

    const a = [
      { type: 'M', x: 0, y: 0 },
      { type: 'L', x: 10, y: 10 },
    ];
    const b = [
      { type: 'M', x: 10, y: 10 },
      { type: 'L', x: 20, y: 20 },
      { type: 'L', x: 200, y: 200 },
    ];
    
    const interpolator = interpolatePathCommands(a, b);
    
    > interpolator(0);
    [
      { type: 'M', x: 0, y: 0 },
      { type: 'L', x: 5, y: 5 },
      { type: 'L', x: 10, y: 10 },
    ]
    
    > interpolator(0.5);
    [
      { type: 'M', x: 5, y: 5 },
      { type: 'L', x: 12.5, y: 12.5 },
      { type: 'L', x: 105, y: 105 },
    ]

    # pathCommandsFromString(pathDString)

    Converts a path d string into an array of path command objects to work with interpolatePathCommands.

    Example usage:

    const a = 'M0,0L10,10';
    
    > pathCommandsFromString(a)
    [
      { type: 'M', x: 0, y: 0 },
      { type: 'L', x: 10, y: 10 },
    ]

    Install

    npm i d3-interpolate-path

    DownloadsWeekly Downloads

    127,643

    Version

    2.2.3

    License

    BSD-3-Clause

    Unpacked Size

    60.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • pbeshai