As I explain bellow, there are multiple approaches to handle d3 with React. The goal of this repo is to explore them and provide examples:
- to test those different approaches
- to help others choose the one that fit their needs
What will you find in that project ?
- Some Recharts based charts
- Some basic and advanced Victory based charts
- Some vanilla d3 components based charts
- Some react-faux-dom based component charts
- Some d3act based charts
- Unit tests with Jest
Some blog posts I wrote about this project:
- D3 React Components with Victory – Reusability / Composability
- Plain d3 code and React working together
What's new from v2 ?
- Upgraded to webpack2
- Setup react-hot-loader@3
- Upgraded to latest eslint + latest eslint-config-airbnb
This is still a work in progress, more examples / blog posts will come ...
React & D3
With React, on the other hand, you never access directly the DOM and let it manage the changes as well as the events.
So, by default, the two of them don't really get along ... d3 messes up with React's reconciliation and React removes what d3 is appending to the DOM ...
In the last year a lot of projects have risen with the goal to make those two work gently together, but there isn't a clear winner yet.
There are two main approaches, both of them using d3 for the processing:
- blackbox d3 and let it do the render without messing up with React lifecyle
- reimplement the job done by d3 on the DOM by letting React do the render (wrapping svg inside jsx)
Both approaches have their pros and cons (I won't talk about that here - people with more experience in that field than me have written posts on that).
This project now follows the same development workflow as the one explained in topheman/webpack-babel-starter (the v2 using webpack 2).
git clone https://github.com/topheman/d3-react-experiments.git cd d3-react-experiments yarn
From your network ip
Useful to access the website via wifi from other devices such as smartphones.
LOCALHOST=false npm start
At the root of the project :
npm run build: for debug (like in dev - with sourceMaps and all)
npm run build-prod: for production (minified/optimized ...)
npm run build-prod-all: both at once in the same build (with sourcemaps on dev version)
/build/dist folder will be created with your project built in it.
You can run it with
npm run serve-build
I'm using eslint, based on eslint-config-airbnb, a preset for
.eslintrc configuration. For more infos, checkout the release it was implemented: firstname.lastname@example.org.
npm run lint: single run linting of
npm run lint-watch: same in watch mode
You can disable the linter by
LINTER=false npm start (though it will still be run a pre-commit hook)
This project is unit tested using the Jest framework:
- To run those tests:
- To run those tests in watch mode:
npm run jest-watch
- To update snapshots:
npm run jest -- -u
Those unit tests are run each time you commit and will be run on travis-ci when you'll push.
- http://www.census.gov/: I wrote a little routine to process the csv
- npm registry