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;