render()

in src/FunnelChart.js [101:150]


  render() {
    const {
      data,
      xScale,
      yScale,
      color,
      pathStyle,
      x,
      y,
      horizontal,
      pathClassName,
    } = this.props;

    const funnelArea = area();
    if (horizontal) {
      funnelArea
        .x0((d, i) => xScale(-getValue(x, d, i)))
        .x1((d, i) => xScale(getValue(x, d, i)))
        .y((d, i) => yScale(getValue(y, d, i)));
    } else {
      funnelArea
        .x((d, i) => xScale(getValue(x, d, i)))
        .y0((d, i) => yScale(-getValue(y, d, i)))
        .y1((d, i) => yScale(getValue(y, d, i)));
    }

    const colors = scaleOrdinal(schemeCategory10).domain(range(10));

    return (
      <g className="rct-funnel-chart" aria-hidden="true">
        {data.map((d, i) => {
          if (i === 0) return null;
          const pathStr = funnelArea([data[i - 1], d]);
          const fill = color ? getValue(color, d, i) : colors(i - 1);
          let style = getValue(pathStyle, d, i);

          style = defaults({}, style, { fill, stroke: 'transparent' });

          return (
            <path
              d={pathStr}
              className={`${getValue(pathClassName, d, i) || ''}`}
              style={style}
              key={i}
            />
          );
        })}
      </g>
    );
  }