Skip to content

Instantly share code, notes, and snippets.

@BojoDimov
Created November 8, 2018 12:06
Show Gist options
  • Save BojoDimov/b88f846ff8f815d2a4faeda382dd1961 to your computer and use it in GitHub Desktop.
Save BojoDimov/b88f846ff8f815d2a4faeda382dd1961 to your computer and use it in GitHub Desktop.
D3 Basic chart
import React from 'react';
import * as d3 from 'd3';
import './styles.css';
class BarChart extends React.Component {
render() {
const { data, width, height } = this.props;
return (
<React.Fragment>
<pre>data: [{data.map((value, i) => <span key={i}>{value}, </span>)}]</pre>
<pre>width: {width}</pre>
<pre>height: {height}</pre>
<div className="simple-chart"></div>
</React.Fragment>
);
}
componentDidMount() {
this.draw2();
}
draw2() {
const { data, width, height } = this.props;
const scaleFn = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, height]);
d3.select('.simple-chart')
.selectAll('div')
.data(data)
.enter()
.append('div')
.attr('class', 'simple-chart-item')
.style('height', (value) => scaleFn(value) + 'px')
.style('width', width / data.length + 'px')
.text((data) => data);
}
}
export default BarChart;
.simple-chart {
display: flex;
align-items: flex-end;
border: 1px solid red;
}
.simple-chart-item {
background-color: lightgreen;
margin: .5rem;
border: 1px solid darkgrey;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment