react-d3 brush implementation.
- Line Chart
"use strict";varReact=require('react');varReactDOM=require('react-dom');varLineBrush=require('react-d3-brush').LineBrush;(function(){vargeneralChartData=require('json!./data/user.json');varchartSeries=[{field: 'age',name: 'Age',color: '#ff7f0e'}],x=function(d){returnd.index;};ReactDOM.render(<LineBrushwidth={600}height={400}brushHeight={100}data={generalChartData}chartSeries={chartSeries}x={x}xLabel={"test"}/>,document.getElementById('data_brush_line'))})()Clone code react-d3-brush.js or minify js react-d3-brush.min.js and include the script in your HTML.
You'll also need react, react-dom, d3
- Line Chart
<!DOCTYPE html><html><head><title>
Line Chart example
</title></head><body><divid="data_line"></div><scriptsrc="https://fb.me/react-0.14.2.js"></script><scriptsrc="https://fb.me/react-dom-0.14.2.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script><scriptsrc="../react-d3-brush.min.js"></script><scripttype="text/babel">varLineBrush=ReactD3Brush.LineBrush;vardata=[{"age": 39,"index": 0},{"age": 38,"index": 1},{"age": 34,"index": 2},{"age": 12,"index": 3}];varchartSeries=[{field: 'age',name: 'Age',color: '#ff7f0e',style: {"stroke-width": 2,"stroke-opacity": .2,"fill-opacity": .2}}],x=function(d){returnd.index;}ReactDOM.render(<LineBrushwidth={600}height={500}brushHeight={100}data={data}chartSeries={chartSeries}x={x}/>,document.getElementById('data_line'))</script></body></html>npm install --save react-d3-brush
- Line Chart: export as
LineBrush - Area Stack Chart: export as
AreaStackBrush - Scatter Plot: export as
ScatterBrush - Bar Chart: export as
BarBrush - Bar Stack: export as
BarStackBrush - Bar Group: export as
BarGroupBrush
Apache 2.0