40 lines
1022 B
JavaScript
40 lines
1022 B
JavaScript
import React, { Component } from 'react'
|
|
import * as d3 from 'd3'
|
|
|
|
|
|
class BarChart extends Component {
|
|
|
|
componentDidMount() {
|
|
this.drawChart();
|
|
}
|
|
|
|
drawChart() {
|
|
const data = this.props.data;
|
|
const width = this.props.width;
|
|
const height = this.props.height;
|
|
|
|
const svg = d3.select("#birthYear")
|
|
.append("svg")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
svg.selectAll("rect")
|
|
.data(data.map(x => x))
|
|
.enter()
|
|
.append("rect")
|
|
.attr("x", (d, i) => i * 40)
|
|
.attr("y", (d, i) => 300 - 10 * d)
|
|
.attr("width", 65)
|
|
.attr("height", (d, i) => d * 10)
|
|
.attr("fill", "#9338FF")
|
|
.on('click', function (x) {
|
|
console.log(x.srcElement);
|
|
// alert(x);
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return <div id={"#" + this.props.id} style={{ margin: '1em' }}></div>
|
|
}
|
|
}
|
|
export default BarChart; |