How to use the d3-interpolate.interpolateString function in d3-interpolate

To help you get started, we’ve selected a few d3-interpolate examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / d3-transition / d3-transition-tests.ts View on Github external
enterTransition = enterTransition.attrTween('r', function(d, i, g) {
    const that: SVGCircleElement = this;
    // const that2: HTMLElement  = this; // fails, type mismatch
    const datum: CircleDatum = d;
    const index: number = i;
    const group: SVGCircleElement[] | ArrayLike = g;
    console.log(this.r.baseVal.value); // this type is SVGCircleElement
    return interpolateString(0, d.r); // datum type is CircleDatum
});
github DefinitelyTyped / DefinitelyTyped / types / d3-transition / d3-transition-tests.ts View on Github external
enterTransition = enterTransition.attrTween('r', function(d, i, g) {
    const that: SVGCircleElement = this;
    // const that2: HTMLElement  = this; // fails, type mismatch
    const datum: CircleDatum = d;
    const index: number = i;
    const group: SVGCircleElement[] | ArrayLike = g;
    console.log(this.r.baseVal.value); // this type is SVGCircleElement
    return interpolateString(0, d.r); // datum type is CircleDatum
});
github DefinitelyTyped / DefinitelyTyped / d3-interpolate / d3-interpolate-tests.ts View on Github external
// test interpolateNumber(a, b) signature ----------------------------------------------------

iNum = d3Interpolate.interpolateNumber(0, 100);
iNum = d3Interpolate.interpolateNumber(new NumCoercible(0), new NumCoercible(100));
num = iNum(0.5);

// test interpolateNumber(a, b) signature ----------------------------------------------------

iNum = d3Interpolate.interpolateRound(0, 100);
iNum = d3Interpolate.interpolateRound(new NumCoercible(0), new NumCoercible(100));
num = iNum(0.5);

// test interpolateString(a, b) signature ----------------------------------------------------

iString = d3Interpolate.interpolateString('-1', '2');
str = iString(0.5);

// test interpolateDate(a, b) signature ----------------------------------------------------

iDate = d3Interpolate.interpolateDate(new Date(2016, 6, 1), new Date(2016, 6, 31));

// test interpolateArray(a, b) signature ----------------------------------------------------

iArrayNum = d3Interpolate.interpolateArray>([1, 2], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayNum = d3Interpolate.interpolateArray<[number, number]>(['1', '2'], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayStr = d3Interpolate.interpolateArray>(['1', '2'], ['4', '8']); // explicit typing
arrStr = iArrayStr(0.5);
github DefinitelyTyped / DefinitelyTyped / types / d3-interpolate / d3-interpolate-tests.ts View on Github external
// test interpolateNumber(a, b) signature ----------------------------------------------------

iNum = d3Interpolate.interpolateNumber(0, 100);
iNum = d3Interpolate.interpolateNumber(new NumCoercible(0), new NumCoercible(100));
num = iNum(0.5);

// test interpolateNumber(a, b) signature ----------------------------------------------------

iNum = d3Interpolate.interpolateRound(0, 100);
iNum = d3Interpolate.interpolateRound(new NumCoercible(0), new NumCoercible(100));
num = iNum(0.5);

// test interpolateString(a, b) signature ----------------------------------------------------

iString = d3Interpolate.interpolateString('-1', '2');
str = iString(0.5);

// test interpolateDate(a, b) signature ----------------------------------------------------

iDate = d3Interpolate.interpolateDate(new Date(2016, 6, 1), new Date(2016, 6, 31));

// test interpolateArray(a, b) signature ----------------------------------------------------

iArrayNum = d3Interpolate.interpolateArray([1, 2], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayNum = d3Interpolate.interpolateArray<[number, number]>(['1', '2'], [4, 8]); // explicit typing
arrNum = iArrayNum(0.5);

iArrayStr = d3Interpolate.interpolateArray(['1', '2'], ['4', '8']); // explicit typing
arrStr = iArrayStr(0.5);
github tableau / query-graphs / query-graphs / lib / tree-rendering.js View on Github external
var tweenDash = function() {
        var l = this.getTotalLength();
        var i = d3interpolate.interpolateString("0," + l, l + "," + l);
        return function(t) {
            return i(t);
        };
    };
github sghall / react-d3-transitions / examples / stackedChartExample / src / components / Path.js View on Github external
isUpating({node: {path}, duration}, {node}) {

    node.setAttribute('opacity', 0.8);

    let interp = interpolateString(node.getAttribute('d'), path);

    this.transition = timer(elapsed => {
      let t = elapsed < duration ? (elapsed / duration): 1;
      node.setAttribute('d', interp(t));
      if (t === 1) {
        this.transition.stop();
      }
    });
  }