原文地址: http://www.codedata.cn/hackne...
在这个博客中，我们将看到如何使用ReactJS和D3JS绘制简单的折线图。
如果您对ReactJS不熟悉，请查看 官方ReactJS网页。您还可以通过步骤视频系列查看我们的 Learn ReactJS。
什么是D3.js
D3.js 是一个Javascript库，用于创建交互式动态可视化。
让我们一步一步看看如何将ReactJS与D3JS集成来绘制一些交互式可视化图。
第1步 - 获取ReactJS示例工作
我们将使用 的jsfiddle例如 从 ReactJS文档 开始。分叉JSFiddle的例子，你应该很好去。
第2步 - 将D3.js添加为外部资源
我们将使用 Cloudflare CDN的D3.js。将D3.js添加为外部资源，如下图所示，并将以下URL作为外部资源输入。
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js
[图片上传失败...(image-90660b-1519689857580)]
第3步 - 构建ReactJS组件以使用D3.js创建可视化
现在让我们尝试使用D3.js绘制折线图。
我们来创建一个Line为所提供的数据点呈现线路径的组件。
const Line = React.createClass({
propTypes: {
path: React.PropTypes.string.isrequired,stroke: React.PropTypes.string,fill: React.PropTypes.string,strokeWidth: React.PropTypes.number
},getDefaultProps() {
return {
stroke: 'blue',fill: 'none',strokeWidth: 3
};
},render() {
let { path,stroke,fill,strokeWidth } = this.props;
return (
<path
d={path}
fill={fill}
stroke={stroke}
strokeWidth={strokeWidth}
/>
);
}
});
在上面的代码中， Line组件呈现 SVG路径。路径数据d是使用D3路径函数生成的 。
让我们创建另一个组件DataSeries，它将Line为每个提供的数据系列提供组件。这产生path基于xScale与yScale用于绘制线图表生成。
const DataSeries = React.createClass({
propTypes: {
colors: React.PropTypes.func,data: React.PropTypes.object,interpolationType: React.PropTypes.string,xScale: React.PropTypes.func,yScale: React.PropTypes.func
},getDefaultProps() {
return {
data: [],interpolationType: 'cardinal',colors: d3.scale.category10()
};
},render() {
let { data,colors,xScale,yScale,interpolationType } = this.props;
let line = d3.svg.line()
.interpolate(interpolationType)
.x((d) => { return xScale(d.x); })
.y((d) => { return yScale(d.y); });
let lines = data.points.map((series,id) => {
return (
<Line
path={line(series)}
stroke={colors(id)}
key={id}
/>
);
});
return (
<g>
<g>{lines}</g>
</g>
);
}
});
在上面的代码中， d3.svg.line 创建了一个新的行生成器，它将输入视为一个由两个元素组成的数组。
现在我们将创建LineChart部件，将计算xScale，yScale基于对数据和将使得DataSeries通过传递xScale，yScale，data（输入x，y值），宽度，高度的图表。
const LineChart = React.createClass({
propTypes: {
width: React.PropTypes.number,height: React.PropTypes.number,data: React.PropTypes.object.isrequired
},getDefaultProps(){
return {
width: 600,height: 300
}
},render() {
let { width,height,data } = this.props;
let xScale = d3.scale.ordinal()
.domain(data.xValues)
.rangePoints([0,width]);
let yScale = d3.scale.linear()
.range([height,10])
.domain([data.yMin,data.yMax]);
return (
<svg width={width} height={height}>
<DataSeries
xScale={xScale}
yScale={yScale}
data={data}
width={width}
height={height}
/>
</svg>
);
}
});
这里 d3.scale.ordinal 构造一个可以具有离散域的序数标度，而 d3.scale.linear则 构造一个 线性定量标度。
你可以在这里了解更多关于D3定量标度的知识 。
现在我们需要LineDataSeries用数据调用组件。
let data = {
points: [
[ { x: 0,y: 20 },{ x: 1,y: 30 },{ x: 2,y: 10 },{ x: 3,y: 5 },{ x: 4,y: 8 },{ x: 5,y: 15 },{ x: 6,y: 10 } ],[ { x: 0,y: 12 },y: 4 },y: 6 },y: 2 } ],y: 0 },y: 2 },y: 2 } ]
],xValues: [0,1,2,3,4,5,6],yMin: 0,yMax: 30
};
ReactDOM.render(
<LineChart
data={data}
width={600}
height={300}
/>,document.getElementById('container')
);
带有id的元素container将被呈现的内容替换LineChart。
如果我们现在看看输出结果，我们会看到曲线图如何绘制。
[图片上传失败...(image-645bfb-1519689857580)]
为了以模块化的方式构建复杂的可视化，我们可以根据它们的优点和缺点，使用下面提到的开源库之一。
ReactJS + D3.js开源项目
这里有两个流行的开源ReactJS + D3.JS项目。
反应-D3
优点
缺点
反应-D3-部件
优点
缺点
概要
下面是在帖子中构建的JSFiddle的最终工作示例。
