D3 + React

Data Visualisations with React + D3

// Barchart

// approach 1 - full feature integration
// D3 handles props and state, 
// React handles rednering logic

class Barchart extends Component {
  xScale = d3.scaleBand().paddingInner(0.1)
  yScale = d3.scaleLinear()
  // keep it synced 
  componentWillMount() {
  	this.updateD3(this.props)
  }
	componentWillUpdate(nextProps) {
		this.updateD3(nextProps)
	}
}

// Chart Axis

// approach 2 - blackbox approach (easier)

class Axis extends Component {
	componentDidMount() {
		this.renderAxis()
	}
	componentDidUpdate() {
		this.renderAxis()
	}
	renderAxis() {
		const scale = d3
			.scalelinear()
			.domain([0, 10])
			.range([0, 200])
		const axis = d3.axisBottom(scale)
		d3.select(this.refs.g).call(axis)
	}
	render() {
		return <g transform='translate(10, 30)' ref='g'/>
	}
}

// IN HOC
const d3Ele = function() {
	const scale = d3
		.scaleLinear()
		.domain([0, 10])
		.range([0, 200])
	const axis = d3.axisBottom(scale);
}
const Axis = D3Blackbox(d3Ele)