72 lines
2.4 KiB
JavaScript
72 lines
2.4 KiB
JavaScript
import React, { Component } from 'react'
|
|
import * as d3 from 'd3'
|
|
|
|
|
|
class RegistraionChart extends Component {
|
|
|
|
componentDidMount() {
|
|
this.drawChart();
|
|
}
|
|
|
|
drawChart() {
|
|
// const data = this.props.data;
|
|
// const margin = { left: 10, top: 10 };
|
|
|
|
// const svg = d3.select("body")
|
|
// .append("svg")
|
|
// .attr("width", 700)
|
|
// .attr("height", 300);
|
|
|
|
// svg.selectAll("rect")
|
|
// .data(data.map(x => x - 1970))
|
|
// .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);
|
|
// });
|
|
|
|
// var xScale = d3.scaleBand().range([0, this.props.width]).padding(0.4),
|
|
// yScale = d3.scaleLinear().range([this.props.height, 0]);
|
|
|
|
const data =
|
|
[
|
|
{
|
|
"gender": "Male",
|
|
"count": 50,
|
|
},
|
|
{
|
|
"gender": "Female",
|
|
"count": 70,
|
|
},
|
|
{
|
|
"gender": "Not Specified",
|
|
"count": 60,
|
|
}
|
|
];
|
|
// d3.select("#gender").append("div")
|
|
// .attr("class", "chart").selectAll(".bar").data(data).enter()
|
|
// .append("div")
|
|
// .attr("class", "bar")
|
|
// .style("width", function (d) { return d.count + "px" }).style("outline", "1px solid black").text(function (d) { return Math.round(d.count) });
|
|
|
|
d3.select("#registration").append("div").attr("class", "chart").selectAll("div.line").data(data)
|
|
.enter()
|
|
.append("div").attr("class", "line");
|
|
d3.selectAll("div.line").append("div")
|
|
.attr("class", "label").text(function (d) { return d.gender });
|
|
d3.selectAll("div.line").append("div")
|
|
.attr("class", "bar")
|
|
.style("width", function (d) { return d.count + "px" }).text(function (d) { return Math.round(d.count) });
|
|
}
|
|
|
|
render() {
|
|
return <div id="registration" style={{ margin: '1em' }}></div>
|
|
}
|
|
}
|
|
export default RegistraionChart; |