function createGenerator(props, generator?: LineRadial): LineRadial { generator = generator || d3.lineRadial(); return args.reduce((acc: LineRadial, arg) => { const prop = props[arg]; if (prop) { return acc[arg](prop); } return acc; }, generator); }
this.container.append('g') .attr('class', 'streams') .selectAll('path') .data(stack(seasons)) .enter() .append('path') .attr('d', area) .style('fill', (d, i) => color(i))
const Arc = (props)=>{ const arc = d3.arc() .innerRadius(props.innerRadius) .outerRadius(props.outerRadius); return ( <Path d={arc(props.data)} style={{fill:props.color}} easing="cubicInOut" duration={300} /> ); }
// method that transforms data into a svg path (should be exposed as part of the AreaSpline interface) _createArea() { var that = this; var area = d3.shape.area() .x(function(d, index) { return that._Xvalue(d, index); }) .y1(function(d, index) { return that._Yvalue(d, index); }) .curve(d3.shape.curveNatural) (this.props.data) // console.debug(`area: ${JSON.stringify(area)}`); return { path : area }; }
function createPath(generator: Link, data): string { return generator(data); }
function createArc(data): string { return d3Shape .arc() .innerRadius(data.innerRadius || 0) .outerRadius(data.outerRadius || data.radius || 2) .startAngle(data.startAngle || 0) .endAngle(data.endAngle || 2 * Math.PI)(); }
d3.arc() .startAngle(d => x(d.x0)) .endAngle(d => x(d.x1)) .innerRadius(d => d.y0) .outerRadius(d => d.y1)
function createGenerator(props, generator?: Link): Link { generator = generator || d3.linkRadial(); return args.reduce((acc: Link, arg) => { const prop = props[arg]; if (prop) { return acc[arg](prop); } return acc; }, generator); }
// method that transforms data into a svg path (should be exposed as part of the AreaSpline interface) _createArea() { const area = d3.shape.area() .x((d) => this.scaleX(moment(d[0]).toDate()) ) .y1((d) => -this.scaleY(d[1]) ) .curve(d3.shape.curveBasis) (this.data) return { path : area }; }
function createGenerator(props, generator?: Link): Link { generator = generator || d3.linkHorizontal(); return args.reduce((acc: Link, arg) => { const prop = props[arg]; if (prop) { return acc[arg](prop); } return acc; }, generator); }
function createGenerator(props, generator?: AreaRadial): AreaRadial { generator = generator || d3.areaRadial(); return args.reduce((acc: AreaRadial, arg) => { const prop = props[arg]; if (prop) { return acc[arg](prop); } return acc; }, generator); }
function createGenerator(props, generator?: Pie): Pie { generator = generator || d3.pie(); return args.reduce((acc: Pie, arg) => { const prop = props[arg]; if (prop) { return acc[arg](prop); } return acc; }, generator); }
function createGenerator(props, generator?: Line): Line { generator = generator || d3.line(); return args.reduce((acc: Line, arg) => { const prop = props[arg]; if (prop) { return acc[arg](prop); } return acc; }, generator); }
function createGenerator(props, generator?: Link): Link { generator = generator || d3.linkHorizontal(); return args.reduce((acc: Link, arg) => { const prop = props[arg]; if (prop) { return acc[arg](prop); } return acc; }, generator); }