layer .enter() .append('g') .attr('class', d => `layer data-group data-group-${d.key}`) .merge(layer)
stackedValues.forEach((layer, index) => { const currentStack = []; layer.forEach((d, i) => { currentStack.push({ values: d, year: this.props.graphData[i].year }); }); stackedData.push(currentStack); });
render() { const { _stackLayout, _colorScale, _stackArea } = this; const { data } = this.state; const stackData = data.length === 0 ? [] : _stackLayout(data); stackData.sort((a, b) => a.index - b.index); return ( <Container> <Svg> {stackData.map(series => ( <path key={series.key} className={series.key} fill={_colorScale(series.key)} d={_stackArea(series)} /> ))} </Svg> <CSVTable csv={moviesCSV} /> </Container> ); }
return ( <G key={i}> {seriesItem.map((d, j) => { return ( <Rect
return stackedItem.map(value => { const x = xScale(xAccessor(value.data)); const y = yScale(value[1]);
const yAxis = _yAxis(yScale); const stackData = data.length === 0 ? [] : _stackLayout(data); stackData.sort((a, b) => a.index - b.index); return ( <Container> <g className="yAxisG" ref={el => d3.select(el).call(yAxis)} /> {stackData.map(stack => ( <g key={stack.key}> {stack.map((obj, i) => ( <rect key={i} width="30" height={Math.abs(yScale(obj[0]) - yScale(obj[1]))} fill={_colorScale(stack.key)} /> ))}
return ( <G key={i}> {seriesItem.map((d, j) => { return ( <Rect