原文地址，如果感興趣可以加我微信: xiaobei060537, 一起交流。
在這個部落格中，我們將看到如何使用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: 8 }, { x: 1, y: 5 }, { x: 2, y: 20 }, { x: 3, y: 12 },
{ x: 4, y: 4 }, { x: 5, y: 6 }, { x: 6, y: 2 } ]
,
[ { x: 0, y: 0 }, { x: 1, y: 5 }, { x: 2, y: 8 }, { x: 3, y: 2 },
{ x: 4, y: 6 }, { x: 5, y: 4 }, { x: 6, 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轉場實現動畫 。
- 只有堆疊的條形圖支援。
反應-D3-部件
優點
- 自定義 比例 支援。
- 支援條形圖（堆積，分組），折線圖，面積圖，餅圖，散點圖。
- 工具提示支援。
缺點
- 無傳奇支援。
- 不支援動畫。
概要
下面是在帖子中構建的JSFiddle的最終工作示例。