How to use the d3-shape.curveBundle function in d3-shape

To help you get started, we’ve selected a few d3-shape 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 / types / d3-shape / d3-shape-tests.ts View on Github external
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 =====================================================
github DefinitelyTyped / DefinitelyTyped / d3-shape / d3-shape-tests.ts View on Github external
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 =====================================================
github DefinitelyTyped / DefinitelyTyped / types / d3-shape / d3-shape-tests.ts View on Github external
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);
github DefinitelyTyped / DefinitelyTyped / d3-shape / d3-shape-tests.ts View on Github external
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();
github FINRAOS / herd-ui / src / app / data-entities / components / data-entity-detail / data-entity-detail.component.ts View on Github external
lineNumbers: true,
    lineWrapping: true,
    mode: 'text/x-go',
    readOnly: true,
    scrollbarStyle: null,
    fixedGutter: true
  };

  // variables for lineage visualization
  @ViewChild('viewLineage') viewLineage: TemplateRef;
  public popover: NgbPopover;
  colors: any[] = [{ name: 'parent', value: '#05af7e' },
  { name: 'child', value: '#55ACD2' },
  { name: 'center', value: '#000000' }];
  hierarchialGraph: HierarchialGraph = { nodes: [], links: [] };
  curve: any = shape.curveBundle;
  modalReference: NgbModalRef;
  displayDelimiter = ':';
  idDelimiter = '__';

  nodeIdCount: { [baseId: string]: number } = {};

  bdefCols = [
    {
      templateField: 'businessObjectDefinitionColumnName',
      field: 'businessObjectDefinitionColumnName',
      header: 'Business Name',
      hide: false,
      sortable: true,
      style: { 'width': '100px' }
    }, {
      templateField: 'description',
github swimlane / ngx-charts / demo / app.component.ts View on Github external
roundDomains = false;
  maxRadius = 10;
  minRadius = 3;
  showSeriesOnHover = true;
  roundEdges: boolean = true;
  animations: boolean = true;
  xScaleMin: any;
  xScaleMax: any;
  yScaleMin: number;
  yScaleMax: number;
  showDataLabel = false;

  curves = {
    Basis: shape.curveBasis,
    'Basis Closed': shape.curveBasisClosed,
    Bundle: shape.curveBundle.beta(1),
    Cardinal: shape.curveCardinal,
    'Cardinal Closed': shape.curveCardinalClosed,
    'Catmull Rom': shape.curveCatmullRom,
    'Catmull Rom Closed': shape.curveCatmullRomClosed,
    Linear: shape.curveLinear,
    'Linear Closed': shape.curveLinearClosed,
    'Monotone X': shape.curveMonotoneX,
    'Monotone Y': shape.curveMonotoneY,
    Natural: shape.curveNatural,
    Step: shape.curveStep,
    'Step After': shape.curveStepAfter,
    'Step Before': shape.curveStepBefore,
    default: shape.curveLinear
  };

  // line interpolation
github esnet / react-timeseries-charts / packages / react-timeseries-charts / dist / curve.js View on Github external
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var d3_shape_1 = require("d3-shape");
var curves = {
    curveBasisClosed: d3_shape_1.curveBasisClosed,
    curveBasisOpen: d3_shape_1.curveBasisOpen,
    curveBasis: d3_shape_1.curveBasis,
    curveBundle: d3_shape_1.curveBundle,
    curveCardinalClosed: d3_shape_1.curveCardinalClosed,
    curveCardinalOpen: d3_shape_1.curveCardinalOpen,
    curveCardinal: d3_shape_1.curveCardinal,
    curveCatmullRomClosed: d3_shape_1.curveCatmullRomClosed,
    curveCatmullRomOpen: d3_shape_1.curveCatmullRomOpen,
    curveCatmullRom: d3_shape_1.curveCatmullRom,
    curveLinearClosed: d3_shape_1.curveLinearClosed,
    curveLinear: d3_shape_1.curveLinear,
    curveMonotoneX: d3_shape_1.curveMonotoneX,
    curveMonotoneY: d3_shape_1.curveMonotoneY,
    curveNatural: d3_shape_1.curveNatural,
    curveStep: d3_shape_1.curveStep,
    curveStepAfter: d3_shape_1.curveStepAfter,
    curveStepBefore: d3_shape_1.curveStepBefore
};
exports.default = curves;
github hshoff / vx / packages / vx-curve / build / index.js View on Github external
get: function get() {
    return _d3Shape.curveBundle;
  }
});
github swimlane / ngx-graph / projects / swimlane / ngx-graph / src / lib / graph / graph.component.ts View on Github external
update(): void {
    super.update();
    if (!this.curve) {
      this.curve = shape.curveBundle.beta(1);
    }

    this.zone.run(() => {
      this.dims = calculateViewDimensions({
        width: this.width,
        height: this.height,
        margins: this.margin,
        showLegend: this.legend
      });

      this.seriesDomain = this.getSeriesDomain();
      this.setColors();
      this.legendOptions = this.getLegendOptions();

      this.createGraph();
      this.updateTransform();
github swimlane / ngx-graph / demo / app.component.ts View on Github external
setInterpolationType(curveType) {
    this.curveType = curveType;
    if (curveType === 'Bundle') {
      this.curve = shape.curveBundle.beta(1);
    }
    if (curveType === 'Cardinal') {
      this.curve = shape.curveCardinal;
    }
    if (curveType === 'Catmull Rom') {
      this.curve = shape.curveCatmullRom;
    }
    if (curveType === 'Linear') {
      this.curve = shape.curveLinear;
    }
    if (curveType === 'Monotone X') {
      this.curve = shape.curveMonotoneX;
    }
    if (curveType === 'Monotone Y') {
      this.curve = shape.curveMonotoneY;
    }