You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
843 B
42 lines
843 B
import * as React from 'react';
|
|
import * as d3 from 'd3';
|
|
|
|
function drawChart(svgRef: React.RefObject<SVGSVGElement>) {
|
|
const data = [12, 5, 6, 6, 9, 10];
|
|
const h = 120;
|
|
const w = 250;
|
|
const svg = d3.select(svgRef.current);
|
|
|
|
svg
|
|
.attr('width', w)
|
|
.attr('height', h)
|
|
.style('margin-top', 50)
|
|
.style('margin-left', 50);
|
|
|
|
svg
|
|
.selectAll('rect')
|
|
.data(data)
|
|
.enter()
|
|
.append('rect')
|
|
.attr('x', (d, i) => i * 40)
|
|
.attr('y', (d, i) => h - 10 * d)
|
|
.attr('width', 20)
|
|
.attr('height', (d, i) => d * 10)
|
|
.attr('fill', 'steelblue');
|
|
}
|
|
|
|
const Chart: React.FunctionComponent = () => {
|
|
const svg = React.useRef<SVGSVGElement>(null);
|
|
React.useEffect(() => {
|
|
drawChart(svg);
|
|
}, [svg]);
|
|
|
|
return (
|
|
<div id="chart">
|
|
<svg ref={svg} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Chart;
|