react d3 core components for reusability.
react-d3-core
is includes the core components of the react-d3
projects. The reason we extract the main component here, is because of reusability. For instance, we use grid, axes over and over again in line chart, area chart, bar chart ... etc. If we move these system a little bit forward to a react component we can declare it more easily in the future.
Such as we need xaxis, yaxis, grid in a new chart. We can install react-d3-core
and import them.
This is a fork of react-d3/react-d3-core, containing additional options and features including:
- Legend swatch size options
- X label inline positioning
- X tick exclusion options
- Linting
- Various bug fixes
Contributors, please do not adjust code style so the original project and this fork can more easily share updates from each other.
This fork is based on v1.2.8 of the original project. The first version of this fork was v1.3.0.
npm install react-d3-core
- Legend
"use strict";
var React = require('react');
var ReactDOM = require('react-dom');
var Legend = require('../../lib/index').Legend;
(function() {
var chartSeries = [
{
field: 'Under 5 Years'
},
{
field: '5 to 13 Years'
}
]
ReactDOM.render(
<div>
<svg width= {960} height= {500}>
<rect height= {"100%"} width= {"100%"} fill= {"#CCC"} />
</svg>
<Legend
width= {960}
chartSeries = {chartSeries}
/>
</div>
, document.getElementById('blank-legend')
)
})()
Clone code react-d3-core.js
or minify js react-d3-core.min.js
and include the script in your HTML.
You'll also need react
, react-dom
, d3
- Legend
<!DOCTYPE html>
<html>
<head>
<title>
Line Chart example
</title>
</head>
<body>
<div id="blank-legend"></div>
<script src="https://fb.me/react-0.14.2.js"></script>
<script src="https://fb.me/react-dom-0.14.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="../react-d3-core.min.js"></script>
<script type="text/babel">
var Legend = ReactD3Core.Legend;
var chartSeries = [
{
field: 'Under 5 Years'
},
{
field: '5 to 13 Years'
}
]
ReactDOM.render(
<div>
<svg width= {960} height= {500}>
<rect height= {"100%"} width= {"100%"} fill= {"#CCC"} />
</svg>
<Legend
width= {960}
chartSeries = {chartSeries}
/>
</div>
, document.getElementById('blank-legend')
)
</script>
</body>
</html>
$ npm install
$ node devServer.js
Open localhost:5000/example
- Initial release
- Babel 5
- D3 3.0
- Move to Babel 6.
- D3 4.0.
- improve example folder.
Apache 2.0