d3-shape#curveCatmullRom JavaScript Examples

The following examples show how to use d3-shape#curveCatmullRom. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AreaChart.js    From fluent-ui-uxpin-merge with MIT License 4 votes vote down vote up 
render() {
    const curve = (type) => {
      switch (type) {
        case 'curveNatural':
          return type;
        case 'curveBasis':
          return type;
        case 'curveBasisClosed':
          return type;
        case 'curveLinear':
          return type;
        case 'curveLinearClosed':
          return type;
        case 'curveMonotoneX':
          return type;
        case 'curveMonotoneY':
          return type;
        case 'curveStep':
          return type;
        case 'curveStepAfter':
          return type;
        case 'curveStepBefore':
          return type;
        case 'curveCatmullRom':
          return curveCatmullRom.alpha(
            parseFloat(this.props.curveCatmullRomAlpha)
          );
        case 'curveCatmullRomClosed':
          return curveCatmullRomClosed.alpha(
            parseFloat(this.props.curveCatmullRomAlpha)
          );
        case 'curveCatmullRomOpen':
          return curveCatmullRomOpen.alpha(
            parseFloat(this.props.curveCatmullRomAlpha)
          );
        case 'curveBundle':
          return curveBundle.beta(parseFloat(this.props.curveBundleBeta));
        case 'curveCardinal':
          return curveCardinal.tension(
            parseFloat(this.props.curveCardinalTension)
          );
        case 'curveCardinalOpen':
          return curveCardinalOpen.tension(
            parseFloat(this.props.curveCardinalTension)
          );
        case 'curveCardinalClosed':
          return curveCardinalClosed.tension(
            parseFloat(this.props.curveCardinalTension)
          );
        case 'no curve':
        default:
          return '';
      }
    };
    return (
      <XYPlot
        height={this.props.height}
        width={this.props.width}
        css={AreaChartStyles}
        onMouseLeave={() => this.restartCrosshair()}
        margin={this.props.margin}>
        {this.props.verticalGridLines ? <VerticalGridLines /> : undefined}
        {this.props.horizontalGridLines ? <HorizontalGridLines /> : undefined}
        {this.props.xLabels ? <XAxis /> : undefined}
        {this.props.yLabels ? <YAxis /> : undefined}
        {!Array.isArray(this.getData()[0]) ? (
          <AreaSeries
            data={this.getData()}
            color={
              this.getColorRange !== undefined
                && this.getColorRange()[0]
                ? this.getColorRange()[0]
                : this.props.color
            }
            curve={curve(this.props.curve)}
            opacity={
              this.props.styles !== undefined
                && this.props.styles[0]
                && this.props.styles[0].opacity
                ? parseFloat(this.props.styles[0].opacity)
                : parseFloat(this.props.opacity / 100)
            }
            stroke={
              this.props.strokeColorRange !== undefined
                && this.props.strokeColorRange[0]
                ? this.props.strokeColorRange[0]
                : this.props.strokeColor
            }
            strokeWidth={
              this.props.styles !== undefined
                && this.props.styles[0]
                && this.props.styles[0].strokeWidth
                ? this.props.styles[0].strokeWidth
                : this.props.strokeWidth
            }
            strokeStyle={
              this.props.styles !== undefined
                && this.props.styles[0]
                && this.props.styles[0].strokeStyle
                ? this.props.styles[0].strokeStyle
                : this.props.strokeStyle
            }
            onNearestX={(value, index) => this.getCrosshair(value, index)}
            onNearestXY={this.props.onNearestXY}
            onSeriesClick={this.props.onSeriesClick}
            onSeriesRightClick={this.props.onSeriesRightClick}
            onSeriesMouseOver={this.props.onSeriesMouseOver}
            onSeriesMouseOut={this.props.onSeriesMouseOver}
            animation={this.props.animation}
          />
        ) : (
          this.getData().map((e, i) => (
            <AreaSeries
              key={i}
              data={this.getData()[i]}
              color={
                this.getColorRange !== undefined
                  && this.getColorRange()[i]
                  ? this.getColorRange()[i]
                  : this.props.color
              }
              curve={curve(this.props.curve)}
              opacity={
                this.props.styles !== undefined
                  && this.props.styles[i]
                  && this.props.styles[i].opacity
                  ? parseFloat(this.props.styles[i].opacity)
                  : parseFloat(this.props.opacity)
              }
              stroke={
                this.props.strokeColorRange !== undefined
                  && this.props.strokeColorRange[i]
                  ? this.props.strokeColorRange[i]
                  : this.props.strokeColor
              }
              strokeWidth={
                this.props.styles !== undefined
                  && this.props.styles[i]
                  && this.props.styles[i].strokeWidth
                  ? this.props.styles[i].strokeWidth
                  : this.props.strokeWidth
              }
              strokeStyle={
                this.props.styles !== undefined
                  && this.props.styles[i]
                  && this.props.styles[i].strokeStyle
                  ? this.props.styles[i].strokeStyle
                  : this.props.strokeStyle
              }
              onNearestX={(value, index) => this.getCrosshair(value, index)}
              onNearestXY={this.props.onNearestXY}
              onSeriesClick={this.props.onSeriesClick}
              onSeriesRightClick={this.props.onSeriesRightClick}
              onSeriesMouseOver={this.props.onSeriesMouseOver}
              onSeriesMouseOut={this.props.onSeriesMouseOver}
              animation={this.props.animation}
            />
          ))
        )}
        {this.props.crossHair ? <Crosshair values={this.state.crosshairValues} /> : undefined}
      </XYPlot>
    );
  }
Example #2
Source File: LineChart.js    From fluent-ui-uxpin-merge with MIT License 4 votes vote down vote up 
render() {
    const curve = (type) => {
      switch (type) {
        case 'curveNatural':
          return type;
        case 'curveBasis':
          return type;
        case 'curveBasisClosed':
          return type;
        case 'curveLinear':
          return type;
        case 'curveLinearClosed':
          return type;
        case 'curveMonotoneX':
          return type;
        case 'curveMonotoneY':
          return type;
        case 'curveStep':
          return type;
        case 'curveStepAfter':
          return type;
        case 'curveStepBefore':
          return type;
        case 'curveCatmullRom':
          return curveCatmullRom.alpha(
            parseFloat(this.props.curveCatmullRomAlpha)
          );
        case 'curveCatmullRomClosed':
          return curveCatmullRomClosed.alpha(
            parseFloat(this.props.curveCatmullRomAlpha)
          );
        case 'curveCatmullRomOpen':
          return curveCatmullRomOpen.alpha(
            parseFloat(this.props.curveCatmullRomAlpha)
          );
        case 'curveBundle':
          return curveBundle.beta(parseFloat(this.props.curveBundleBeta));
        case 'curveCardinal':
          return curveCardinal.tension(
            parseFloat(this.props.curveCardinalTension)
          );
        case 'curveCardinalOpen':
          return curveCardinalOpen.tension(
            parseFloat(this.props.curveCardinalTension)
          );
        case 'curveCardinalClosed':
          return curveCardinalClosed.tension(
            parseFloat(this.props.curveCardinalTension)
          );
        case 'no curve':
        default:
          return '';
      }
    };
    return (
      <XYPlot
        height={this.props.height}
        width={this.props.width}
        css={ChartStyles}
        onMouseLeave={() => this.restartCrosshair()}
        margin={this.props.margin}>
        {this.props.verticalGridLines ? <VerticalGridLines /> : undefined}
        {this.props.horizontalGridLines ? <HorizontalGridLines /> : undefined}
        {this.props.xLabels ? <XAxis /> : undefined}
        {this.props.yLabels ? <YAxis /> : undefined}
        {!Array.isArray(this.props.data[0]) ? (
          <LineSeries
            data={this.state.data}
            color={
              this.props.colorRange !== undefined
            && this.props.colorRange[0]
                ? this.props.colorRange[0]
                : this.props.color
            }
            curve={curve(this.props.curve)}
            opacity={
              this.props.styles !== undefined
            && this.props.styles[0]
            && this.props.styles[0].opacity
                ? parseFloat(this.props.styles[0].opacity)
                : parseFloat(this.props.opacity)
            }
            strokeWidth={
              this.props.styles !== undefined
            && this.props.styles[0]
            && this.props.styles[0].strokeWidth
                ? this.props.styles[0].strokeWidth
                : this.props.strokeWidth
            }
            strokeStyle={
              this.props.styles !== undefined
            && this.props.styles[0]
            && this.props.styles[0].strokeStyle
                ? this.props.styles[0].strokeStyle
                : this.props.strokeStyle
            }
            onNearestX={(value, index) => this.getCrosshair(value, index)}
            onNearestXY={this.props.onNearestXY}
            onSeriesClick={this.props.onSeriesClick}
            onSeriesRightClick={this.props.onSeriesRightClick}
            onSeriesMouseOver={this.props.onSeriesMouseOver}
            onSeriesMouseOut={this.props.onSeriesMouseOver}
            animation={this.props.animation}
          />
        ) : (
          this.state.data.map((e, i) => (
            <LineSeries
              key={i}
              data={this.state.data[i]}
              color={
                  this.props.colorRange !== undefined
                  && this.props.colorRange[i]
                    ? this.props.colorRange[i]
                    : this.props.color
                }
              curve={curve(this.props.curve)}
              opacity={
                  this.props.styles !== undefined
                  && this.props.styles[i]
                  && this.props.styles[i].opacity
                    ? parseFloat(this.props.styles[i].opacity)
                    : parseFloat(this.props.opacity)
                }
              strokeWidth={
                  this.props.styles !== undefined
                  && this.props.styles[i]
                  && this.props.styles[i].strokeWidth
                    ? this.props.styles[i].strokeWidth
                    : this.props.strokeWidth
                }
              strokeStyle={
                  this.props.styles !== undefined
                  && this.props.styles[i]
                  && this.props.styles[i].strokeStyle
                    ? this.props.styles[i].strokeStyle
                    : this.props.strokeStyle
                }
              onNearestX={(value, index) => this.getCrosshair(value, index)}
              onNearestXY={this.props.onNearestXY}
              onSeriesClick={this.props.onSeriesClick}
              onSeriesRightClick={this.props.onSeriesRightClick}
              onSeriesMouseOver={this.props.onSeriesMouseOver}
              onSeriesMouseOut={this.props.onSeriesMouseOver}
              animation={this.props.animation}
            />
          ))
        )}
        {this.props.crossHair ? <Crosshair values={this.state.crosshairValues} /> : undefined}
      </XYPlot>
    );
  }
Example #3
Source File: LineMarkChart.js    From fluent-ui-uxpin-merge with MIT License 4 votes vote down vote up 
render() {
    const curve = (type) => {
      switch (type) {
        case 'curveNatural':
          return type;
        case 'curveBasis':
          return type;
        case 'curveBasisClosed':
          return type;
        case 'curveLinear':
          return type;
        case 'curveLinearClosed':
          return type;
        case 'curveMonotoneX':
          return type;
        case 'curveMonotoneY':
          return type;
        case 'curveStep':
          return type;
        case 'curveStepAfter':
          return type;
        case 'curveStepBefore':
          return type;
        case 'curveCatmullRom':
          return curveCatmullRom.alpha(
            parseFloat(this.props.curveCatmullRomAlpha)
          );
        case 'curveCatmullRomClosed':
          return curveCatmullRomClosed.alpha(
            parseFloat(this.props.curveCatmullRomAlpha)
          );
        case 'curveCatmullRomOpen':
          return curveCatmullRomOpen.alpha(
            parseFloat(this.props.curveCatmullRomAlpha)
          );
        case 'curveBundle':
          return curveBundle.beta(parseFloat(this.props.curveBundleBeta));
        case 'curveCardinal':
          return curveCardinal.tension(
            parseFloat(this.props.curveCardinalTension)
          );
        case 'curveCardinalOpen':
          return curveCardinalOpen.tension(
            parseFloat(this.props.curveCardinalTension)
          );
        case 'curveCardinalClosed':
          return curveCardinalClosed.tension(
            parseFloat(this.props.curveCardinalTension)
          );
        case 'no curve':
        default:
          return '';
      }
    };
    return (
      <XYPlot
        height={this.props.height}
        width={this.props.width}
        css={ChartStyles}
        onMouseLeave={() => this.restartCrosshair()}
        xType={this.props.xScaleType}
        yType={this.props.yScaleType}
        margin={this.props.margin}>
        {this.props.verticalGridLines ? <VerticalGridLines /> : undefined}
        {this.props.horizontalGridLines ? <HorizontalGridLines /> : undefined}
        {this.props.xLabels ? <XAxis title={this.props.xAxisTitle} /> : undefined}
        {this.props.yLabels ? <YAxis title={this.props.yAxisTitle} /> : undefined}
        {!Array.isArray(this.props.data[0]) ? (
          <LineMarkSeries
            data={this.state.data}
            color={
              this.props.colorRange !== undefined && this.props.colorRange[0]
                ? this.props.colorRange[0]
                : this.props.color
            }
            fill={
              this.props.fillRange !== undefined && this.props.fillRange[0]
                ? this.props.fillRange[0]
                : this.props.fill
            }
            size={this.props.size}
            curve={curve(this.props.curve)}
            opacity={
              this.props.styles !== undefined
              && this.props.styles[0]
              && this.props.styles[0].opacity
                ? parseFloat(this.props.styles[0].opacity)
                : parseFloat(this.props.opacity)
            }
            strokeWidth={
              this.props.styles !== undefined
              && this.props.styles[0]
              && this.props.styles[0].strokeWidth
                ? this.props.styles[0].strokeWidth
                : this.props.strokeWidth
            }
            strokeStyle={
              this.props.styles !== undefined
              && this.props.styles[0]
              && this.props.styles[0].strokeStyle
                ? this.props.styles[0].strokeStyle
                : this.props.strokeStyle
            }
            onValueClick={(value) => this.getHint(value)}
            onNearestX={(value, index) => this.getCrosshair(value, index)}
            onNearestXY={this.props.onNearestXY}
            onSeriesClick={this.props.onSeriesClick}
            onSeriesRightClick={this.props.onSeriesRightClick}
            onSeriesMouseOver={this.props.onSeriesMouseOver}
            onSeriesMouseOut={this.props.onSeriesMouseOver}
            animation={this.props.animation}
          />
        ) : (
          this.state.data.map((e, i) => (
            <LineMarkSeries
              key={i}
              data={this.state.data[i]}
              color={
                  this.props.colorRange !== undefined
                  && this.props.colorRange[i]
                    ? this.props.colorRange[i]
                    : this.props.color
                }
              fill={
                  this.props.fillRange !== undefined
                  && this.props.fillRange[i]
                    ? this.props.fillRange[i]
                    : this.props.fill
                }
              size={this.props.size}
              curve={curve(this.props.curve)}
              opacity={
                  this.props.styles !== undefined
                  && this.props.styles[i]
                  && this.props.styles[i].opacity
                    ? parseFloat(this.props.styles[i].opacity)
                    : parseFloat(this.props.opacity)
                }
              strokeWidth={
                  this.props.styles !== undefined
                  && this.props.styles[i]
                  && this.props.styles[i].strokeWidth
                    ? this.props.styles[i].strokeWidth
                    : this.props.strokeWidth
                }
              strokeStyle={
                  this.props.styles !== undefined
                  && this.props.styles[i]
                  && this.props.styles[i].strokeStyle
                    ? this.props.styles[i].strokeStyle
                    : this.props.strokeStyle
                }
              onValueClick={(value) => this.getHint(value)}
              onNearestX={(value, index) => this.getCrosshair(value, index)}
              onNearestXY={this.props.onNearestXY}
              onSeriesClick={this.props.onSeriesClick}
              onSeriesRightClick={this.props.onSeriesRightClick}
              onSeriesMouseOver={this.props.onSeriesMouseOver}
              onSeriesMouseOut={this.props.onSeriesMouseOver}
              animation={this.props.animation}
            />
          ))
        )}
        {this.props.crossHair ? (
          <Crosshair values={this.state.crosshairValues} />
        ) : (
          undefined
        )}
        {this.props.hint && this.state.showHint ? (
          <Hint value={this.state.hintValue} />
        ) : (
          undefined
        )}
      </XYPlot>
    );
  }