updateBarChart(newData) { const svgCanvas = select(this.refs.canvas); const bars = svgCanvas.selectAll('.bar').data(newData); bars .transition() .attr('height', (datapoint) => datapoint * scale) .attr('y', (datapoint) => canvasHeight - datapoint * scale); bars.exit().remove(); }
select(node) .selectAll('path') .data(mapData) .attr('d', d => d.path) .attr('stroke', 'black') .attr('fill', d => d.fill) .style('cursor', 'pointer')
updateAxis() { const axis = select(this.axisRef.current) .call(this.state.axis); if (this.props.orientation === AxisOrientation.BOTTOM && this.props.rotateText) { axis.selectAll('text') .style('text-anchor', 'end') .attr('dx', '-1em') .attr('dy', '-.2em') .attr('transform', 'rotate(-65)'); } }
componentDidMount() { const { id, onDrag, onDragEnd } = this.props; select(`#${id}`) .call( drag() .on('drag', function dragged() { onDrag(this, event); }) .on('end', function ended() { onDragEnd(this); }) ); }
createBarChart() { const node = this.node; const dataMax = max(this.props.data); const yScale = scaleLinear() .domain([0, dataMax]) .range([0, this.props.size[1]]); select(node) .selectAll('rect') .data(this.props.data) .enter() .append('rect'); select(node) .selectAll('rect') .data(this.props.data) .exit() .remove(); select(node) .selectAll('rect') .data(this.props.data) .style('fill', '#fe9922') .attr('x', (d,i) => i * 25) .attr('y', d => this.props.size[1] - yScale(d)) .attr('height', d => yScale(d)) .attr('width', 25); }
embedSvg () { const selector = 'polygon.fil2' select(this.node) .html(this.state.image) .select('svg') .attr('width', this.width) .attr('height', this.height) .selectAll(selector) .attr('style', null) .attr('fill', '#999') .attr('stroke', '#333') .attr('class', 'area') .attr('area-index', (_, index) => index) }
componentWillUnmount() { const { id } = this.props; select(`#${id}`).on('.drag', null); }
constructor(element, data, callback) { const vis = this; vis.svgCanvas = select(element).style('border', '1px solid black'); const bars = vis.svgCanvas.selectAll('.bar').data(data); bars .enter() .append('rect') .merge(bars) .attr('class', 'bar') .attr('width', 40) .attr('height', (datapoint) => datapoint * scale) .attr('fill', 'orange') .attr('x', (datapoint, iteration) => iteration * 45 + 4) .attr('y', (datapoint) => canvasHeight - datapoint * scale) .on('click', (datapoint, index) => { callback(datapoint, index); }); bars.exit().remove(); }
drawBarChart(data) { const svgCanvas = select(this.refs.canvas).style( 'border', '1px solid black' ); const bars = svgCanvas.selectAll('.bar').data(data); bars .enter() .append('rect') .merge(bars) .attr('class', 'bar') .attr('width', 40) .attr('height', (datapoint) => datapoint * scale) .attr('fill', 'orange') .attr('x', (datapoint, iteration) => iteration * 45 + 4) .attr('y', (datapoint) => canvasHeight - datapoint * scale) .on('click', (datapoint, index) => { this.props.callback(datapoint, index); }); }
componentDidMount() { const { id, onDragStart, onDrag, onDragEnd } = this.props; select(`#${id}`) .call( drag() .on('start', function started() { onDragStart(this); }) .on('drag', function dragged() { onDrag(this, event); }) .on('end', function ended() { onDragEnd(this); }) ); }
componentWillUnmount() { const { id } = this.props; select(`#${id}`).on('.drag', null); }
componentWillUnmount() { const { id } = this.props; select(`#${id}`).on('.drag', null); }
componentWillUnmount() { const { id } = this.props; select(`#${id}`).on('.drag', null); }
componentDidMount() { const { id, onDragStart, onDrag, onDragEnd } = this.props; select(`#${id}`) .call( drag() .on('start', function started() { onDragStart(this); }) .on('drag', function dragged() { onDrag(this, event); }) .on('end', function ended() { onDragEnd(this); }) ); }
componentDidMount() { const { id, onDragStart, onDrag, onDragEnd } = this.props; select(`#${id}`) .call( drag() .on('start', function started() { onDragStart(this); }) .on('drag', function dragged() { onDrag(this, event); }) .on('end', function ended() { onDragEnd(this); }) ); }