How to use d3-shape - 10 common examples

defaultArea = defaultArea.defined(true);

area = area.defined((d, t, data) => {
    console.log('Number of Points: ', data.length);
    console.log('Y0-Coordinate of first point: ', data[0].y0); // data type is Array
    return !d.missing; // d type is AreaDatum
});

areaDefAccessorFn = area.defined();

// curve(...) ------------------------------------------------------------------------

defaultArea = defaultArea.curve(d3Shape.curveLinear);

area = area.curve(d3Shape.curveCardinal.tension(0.5));
// area = area.curve(d3Shape.curveBundle.beta(0.5)); // fails, as curveBundle-based line generator does not support area-related methods

currentCurveFactory = area.curve();

// use Area generator ===============================================================

defaultArea([[10, 10], [20, 10], [20, 20]]);

const areaData: AreaDatum[] = [
    { x0: 10, y0: 10, x1: 10, y1: 30, missing: false },
    { x0: 20, y0: 20, x1: 20, y1: 40, missing: false },
    { x0: 30, y0: 30, x1: 30, y1: 30, missing: false }
];

const areaPathStringMaybe: string | null = area(areaData);

defaultLine = defaultLine.defined(true);

line = line.defined((d, t, data) => {
    console.log('Number of Points: ', data.length);
    console.log('Y-Coordinate of first point: ', data[0].y); // data type is Array
    return !d.missing; // d type is LineDatum
});

lineDefAccessorFn = line.defined();

// curve(...) ------------------------------------------------------------------------

defaultLine = defaultLine.curve(d3Shape.curveLinear);

line = line.curve(d3Shape.curveBundle.beta(0.5));

let currentCurveFactory: d3Shape.CurveFactory | d3Shape.CurveFactoryLineOnly = line.curve();

// use Line generator ===============================================================

defaultLine([[10, 10], [20, 10], [20, 20]]);

const lineData: LineDatum[] = [
    { x: 10, y: 10, missing: false },
    { x: 20, y: 10, missing: false },
    { x: 20, y: 20, missing: false }
];

const linePathStringMaybe: string | null = line(lineData);

// lineRadial(...) create Line generator =====================================================

defaultLine = defaultLine.defined(true);

line = line.defined((d, t, data) => {
    console.log('Number of Points: ', data.length);
    console.log('Y-Coordinate of first point: ', data[0].y); // data type is Array
    return !d.missing; // d type is LineDatum
});

lineDefAccessorFn = line.defined();

// curve(...) ------------------------------------------------------------------------

defaultLine = defaultLine.curve(d3Shape.curveLinear);

line = line.curve(d3Shape.curveBundle.beta(0.5));

let currentCurveFactory: d3Shape.CurveFactory | d3Shape.CurveFactoryLineOnly = line.curve();

// use Line generator ===============================================================

defaultLine([[10, 10], [20, 10], [20, 20]]);

const lineData: LineDatum[] = [
    { x: 10, y: 10, missing: false },
    { x: 20, y: 10, missing: false },
    { x: 20, y: 20, missing: false }
];

const linePathStringMaybe: string | null = line(lineData);

// radialLine(...) create Line generator =====================================================

{ name: 'apples', label: 'Apples' },
    { name: 'oranges', label: 'Oranges' }
];

const stackData: StackDatum[] = [
    { values: { bananas: 10, apples: 20, oranges: 10 } },
    { values: { bananas: 10, apples: 25, oranges: 0 } },
    { values: { bananas: 20, apples: 20, oranges: 30 } },
    { values: { bananas: 12, apples: 10, oranges: 50 } }
];

// Create stack generator ==========================================================

let defaultStack: d3Shape.Stack;

defaultStack = d3Shape.stack();

let overlyComplicatedStack: d3Shape.Stack;

overlyComplicatedStack = d3Shape.stack();

// Configure stack generator =======================================================

// keys(...) ----------------------------------------------------------------------

defaultStack = defaultStack.keys(['bananas', 'apples', 'oranges']);

overlyComplicatedStack = overlyComplicatedStack.keys((data: StackDatum[], keys: StackKey[]) => {
    return keys;
});

let keysAccessor: (this: any, data: StackDatum[], keys: StackKey[]) => StackKey[];

customSymbol = {
    draw(context: CanvasPathMethods, size: number): void {
        // draw custom symbol using canvas path methods
    }
};

// Symbol() create Symbol Generator ===================================================

let canvasSymbol: d3Shape.Symbol;

let svgSymbol: d3Shape.Symbol;

canvasSymbol = d3Shape.symbol();

svgSymbol = d3Shape.symbol();

// Configure Symbol Generator =========================================================

// context() --------------------------------------------------------------------------

if (context !== null) {
    canvasSymbol = canvasSymbol.context(context); // draw to canvas
}
context = canvasSymbol.context();

svgSymbol = svgSymbol.context(null); // use as path string generator for SVG

// size() ----------------------------------------------------------------------------

canvasSymbol = canvasSymbol.size(30);

curveCatmullRomFactory = d3Shape.curveCatmullRomClosed;
curveCatmullRomFactory = d3Shape.curveCatmullRomClosed.alpha(0.5);

curveGenerator = d3Shape.curveCatmullRomClosed.alpha(0.5)(context!);  // force context to be non-null with post-fix for mock
curveGenerator = d3Shape.curveCatmullRomClosed.alpha(0.5)(path());

curveFactory = d3Shape.curveLinear;

curveFactory = d3Shape.curveLinearClosed;

curveFactory = d3Shape.curveMonotoneX;

curveFactory = d3Shape.curveMonotoneY;

curveFactory = d3Shape.curveNatural;

curveFactory = d3Shape.curveStep;

curveFactory = d3Shape.curveStepAfter;

curveFactory = d3Shape.curveStepBefore;

// -----------------------------------------------------------------------------------
// Test Link/LinkRadial Generators
// -----------------------------------------------------------------------------------

// Preparatory steps =================================================================

interface TreeNodeDatum {
    whatever: any;
}

// use Line generator ===============================================================

defaultLine([[10, 10], [20, 10], [20, 20]]);

const lineData: LineDatum[] = [
    { x: 10, y: 10, missing: false },
    { x: 20, y: 10, missing: false },
    { x: 20, y: 20, missing: false }
];

const linePathStringMaybe: string | null = line(lineData);

// lineRadial(...) create Line generator =====================================================

let defaultLineRadial: d3Shape.LineRadial<[number, number]> = d3Shape.lineRadial();
let lineRadial: d3Shape.LineRadial = d3Shape.lineRadial();

// DEPRECATED Naming conventions test (cross-testing with new naming conventions)

const defaultRadialLine: d3Shape.RadialLine<[number, number]> = defaultLineRadial;
const radialLine: d3Shape.RadialLine = lineRadial;

defaultLineRadial = d3Shape.radialLine();
lineRadial = d3Shape.radialLine();

// configure LineRadial(...) generator ======================================================

// context(...) ----------------------------------------------------------------------

if (context !== null) {
    defaultLineRadial = defaultLineRadial.context(context); // draw to canvas
}

curveGenerator.lineStart();
curveGenerator.lineEnd();
curveGenerator.point(10, 20);
curveGenerator.areaStart();
curveGenerator.areaEnd();

// Test factories --------------------------------------------------------------------

curveFactory = d3Shape.curveBasis;
curveFactory = d3Shape.curveBasisOpen;
curveFactory = d3Shape.curveBasisClosed;

let curveBundleFactory: d3Shape.CurveBundleFactory;

curveBundleFactory = d3Shape.curveBundle;
curveBundleFactory = d3Shape.curveBundle.beta(0.5);

lineOnlyGenerator = d3Shape.curveBundle.beta(0.5)(context!);  // force context to be non-null with post-fix for mock
lineOnlyGenerator = d3Shape.curveBundle.beta(0.5)(path());
// curveGenerator = d3Shape.curveBundle.beta(0.5)(context); // fails, no area related methods

let curveCardinalFactory: d3Shape.CurveCardinalFactory;

curveCardinalFactory = d3Shape.curveCardinal;
curveCardinalFactory = d3Shape.curveCardinal.tension(0.5);

curveGenerator = d3Shape.curveCardinal.tension(0.5)(context!);  // force context to be non-null with post-fix for mock
curveGenerator = d3Shape.curveCardinal.tension(0.5)(path());

curveCardinalFactory = d3Shape.curveCardinalOpen;
curveCardinalFactory = d3Shape.curveCardinalOpen.tension(0.5);

let areaRadialLineGenerator: d3Shape.RadialLine;

areaRadialLineGenerator = radialArea.lineStartAngle();
areaRadialLineGenerator = radialArea.lineInnerRadius();
areaRadialLineGenerator = radialArea.lineEndAngle();
areaRadialLineGenerator = radialArea.lineOuterRadius();

// -----------------------------------------------------------------------------------
// Test Curve Factories
// -----------------------------------------------------------------------------------

// Test General interfaces -----------------------------------------------------------

let lineOnlyGenerator: d3Shape.CurveGeneratorLineOnly;

const lineOnlyFactory: d3Shape.CurveFactoryLineOnly = d3Shape.curveBundle;

lineOnlyGenerator = lineOnlyFactory(path());
lineOnlyGenerator = lineOnlyFactory(context!); // force context to be non-null with post-fix for mock

lineOnlyGenerator.lineStart();
lineOnlyGenerator.lineEnd();
lineOnlyGenerator.point(10, 20);

let curveGenerator: d3Shape.CurveGenerator;

let curveFactory: d3Shape.CurveFactory = d3Shape.curveBasis;

curveGenerator = curveFactory(path());
curveGenerator = curveFactory(context!);  // force context to be non-null with post-fix for mock

curveGenerator.lineStart();

let coordinates: [number, number];

coordinates = defaultLinkDatum.source;
coordinates = defaultLinkDatum.target;

// Test generator factories ==========================================================

let defaultLink: d3Shape.Link;

defaultLink = d3Shape.linkHorizontal();
defaultLink = d3Shape.linkVertical();

let link: d3Shape.Link, HierarchyPointNode>;

link = d3Shape.linkHorizontal, HierarchyPointNode>();
link = d3Shape.linkVertical, HierarchyPointNode>();

let svgLink: d3Shape.Link, HierarchyPointNode>;

svgLink = d3Shape.linkHorizontal, HierarchyPointNode>();
svgLink = d3Shape.linkVertical, HierarchyPointNode>();

let defaultLinkRadial: d3Shape.LinkRadial;

defaultLinkRadial = d3Shape.linkRadial();

let radialLink: d3Shape.LinkRadial, HierarchyPointNode>;

radialLink = d3Shape.linkRadial, HierarchyPointNode>();

let svgLinkRadial: d3Shape.LinkRadial, HierarchyPointNode>;