How to use the d3-shape.curveLinear 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 swimlane / ngx-graph / demo / app.component.ts View on Github external
{
      label: 'Cola Force Directed',
      value: 'colaForceDirected',
      customLayout: new ColaForceDirectedLayout(),
      isClustered: true,
    },
    {
      label: 'D3 Force Directed',
      value: 'd3ForceDirected',
      customLayout: new D3ForceDirectedLayout(),
    },
  ];

  // line interpolation
  curveType: string = 'Linear';
  curve: any = shape.curveLinear;
  interpolationTypes = [
    'Bundle',
    'Cardinal',
    'Catmull Rom',
    'Linear',
    'Monotone X',
    'Monotone Y',
    'Natural',
    'Step',
    'Step After',
    'Step Before'
  ];

  colorSchemes: any;
  colorScheme: any;
  schemeType: string = 'ordinal';
github swimlane / ngx-charts / demo / app.component.ts View on Github external
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
  curveType: string = 'Linear';
  curve: any = this.curves[this.curveType];
  interpolationTypes = [
    'Basis', 'Bundle', 'Cardinal', 'Catmull Rom', 'Linear', 'Monotone X',
    'Monotone Y', 'Natural', 'Step', 'Step After', 'Step Before'
  ];

  closedCurveType: string = 'Linear Closed';
  closedCurve: any = this.curves[this.closedCurveType];
  closedInterpolationTypes = [
    'Basis Closed', 'Cardinal Closed', 'Catmull Rom Closed', 'Linear Closed'
  ];
github davegomez / silky-charts / cjs / chunk-ec892a96.js View on Github external
var OUTLINE_STROKE = -20; // Line options

var LINE_STROKE_WIDTH = 2;
var LINE_TYPE = 'curveLinear';
var LINE_TYPES = {
  curveBasis: d3Shape.curveBasis,
  curveBasisClosed: d3Shape.curveBasisClosed,
  curveBasisOpen: d3Shape.curveBasisOpen,
  curveBundle: d3Shape.curveBundle,
  curveCardinal: d3Shape.curveCardinal,
  curveCardinalClosed: d3Shape.curveCardinalClosed,
  curveCardinalOpen: d3Shape.curveCardinalOpen,
  curveCatmullRom: d3Shape.curveCatmullRom,
  curveCatmullRomClosed: d3Shape.curveCatmullRomClosed,
  curveCatmullRomOpen: d3Shape.curveCatmullRomOpen,
  curveLinear: d3Shape.curveLinear,
  curveLinearClosed: d3Shape.curveLinearClosed,
  curveMonotoneX: d3Shape.curveMonotoneX,
  curveMonotoneY: d3Shape.curveMonotoneY,
  curveNatural: d3Shape.curveNatural,
  curveStep: d3Shape.curveStep,
  curveStepAfter: d3Shape.curveStepAfter,
  curveStepBefore: d3Shape.curveStepBefore
};

/**
 * Calculate the size of the chart using aspect-ratio, margins, and parent size.
 *
 * @param {Number} w1 Chart's width.
 * @param {Number} h1 Chart's height.
 * @param {Object} h1 Chart's margin.
 * @param {String} r Chart's aspect-ratio.
github swimlane / ngx-charts / demo / app.component.ts View on Github external
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
  curveType: string = 'Linear';
  curve: any = this.curves[this.curveType];
  interpolationTypes = [
    'Basis', 'Bundle', 'Cardinal', 'Catmull Rom', 'Linear', 'Monotone X',
    'Monotone Y', 'Natural', 'Step', 'Step After', 'Step Before'
github JesperLekland / react-native-svg-charts / src / waterfall-chart.js View on Github external
gridMin: PropTypes.number,
    gridMax: PropTypes.number,
    gridProps: PropTypes.number,
    extras: PropTypes.array,
    renderExtra: PropTypes.func,
    renderDecorator: PropTypes.func,
    renderGrid: PropTypes.func,
    positiveFill: PropTypes.string,
    negativeFill: PropTypes.string,
}

WaterfallChart.defaultProps = {
    strokeColor: '#22B6B0',
    positiveFill: 'rgba(34, 128, 176, 0.4)',
    negativeFill: 'rgba(89, 11, 157, 0.4)',
    curve: shape.curveLinear,
    contentInset: {},
    numberOfTicks: 10,
    showGrid: true,
    strokeWidth: 3,
    spacing: 0.05,
    gridMin: 0,
    gridMax: 0,
    extras: [],
    renderExtra: () => {
    },
    renderDecorator: () => {
    },
}

export default WaterfallChart
github swimlane / ngx-graph / src / docs / demos / components / ngx-graph-org-tree / ngx-graph-org-tree.component.ts View on Github external
@Component({
  selector: 'ngx-graph-org-tree',
  templateUrl: './ngx-graph-org-tree.component.html',
  styleUrls: ['./ngx-graph-org-tree.component.scss']
})
export class NgxGraphOrgTreeComponent implements OnInit {

  @Input() employees: Employee[] = [];

  public nodes: Node[] = [];
  public links: Edge[] = [];
  public layoutSettings = {
    orientation: "TB"
  }
  public curve: any = shape.curveLinear;
  public layout: Layout = new DagreNodesOnlyLayout();

  constructor() {
    this.employees = [{
      id: "1",
      name: "Employee 1",
      office: "Office 1",
      role: "Manager",
      backgroundColor: "#DC143C",
    }, {
      id: "2",
      name: "Employee 2",
      office: "Office 2",
      role: "Engineer",
      backgroundColor: "#00FFFF",
      upperManagerId: "1",
github JesperLekland / react-native-svg-charts / storybook / stories / x-axis / scale-time.js View on Github external
value: 20,
                date: dateFns.setHours(new Date(2018, 0, 0), 24),
            },
        ]

        return (
github WeAreOpenSourceProjects / NodeAngular / libs / slides / src / components / slides-editor-form / slides-editor / slide-card / slide-editor / charts-builder / charts-builder.component.ts View on Github external
showLegend: true,
    legendTitle: 'Legend',
    gradient: false,
    showXAxis: true,
    showYAxis: true,
    showXAxisLabel: true,
    showYAxisLabel: true,
    yAxisLabel: '',
    xAxisLabel: '',
    autoScale: true,
    showGridLines: true,
    rangeFillOpacity: 0.5,
    roundDomains: false,
    tooltipDisabled: false,
    showSeriesOnHover: true,
    curve: shape.curveLinear,
    curveClosed: shape.curveCardinalClosed
};

@Component({
    selector: 'app-charts-builder',
    templateUrl: './charts-builder.component.html',
    styleUrls: ['./charts-builder.component.html']
})
export class ChartsBuilderComponent implements OnInit, DoCheck {
    @Input() inputData: any[];
    @Input() inputOptions: any;
    @Output() validSlide = new EventEmitter();
    @Output() validForm = new EventEmitter();
    chartTypes = chartTypes;

    config = {