React with D3

by Rishabh Sharma

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="app"></div>

React

const data = [{
	letter: 'A',
  frequency: .08167
}, {
	letter: 'A',
  frequency: .01492
}, {
	letter: 'A',
  frequency: .02782
}, {
	letter: 'A',
  frequency: .04253
}]

class TodoApp extends React.Component {
	componentDidMount() {
  	console.log(d3.select(this.node));
  }
  
  createBarChart = () => {
var svg = d3.select(this.node),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");  
  }
  
  render() {
    return (
    	<svg ref={node => this.node = node} width="300" height="200"></svg>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))