D3actD3 和 React 結(jié)合

D3act 可以創(chuàng)建一個(gè)輕量級(jí)的 React 組件包裝，它將 React 整個(gè)生命周期的方法 componentDidMount, componentDidUpdate 和 componentWillUnmount 映射到了 D3 圖表的 create, update 和 unmount 方法中。

當(dāng)涉及到數(shù)據(jù)可視化的時(shí)候，D3 就是實(shí)際上的標(biāo)準(zhǔn)，React 近期已經(jīng)成為 go-to 庫(kù)，用于構(gòu)建用戶界面。 D3 和 React 都是數(shù)據(jù)中心庫(kù)，二者是天作之合。D3 專注于數(shù)據(jù)驅(qū)動(dòng)，而 React 解決了構(gòu)建大型應(yīng)用時(shí)的數(shù)據(jù)改變問(wèn)題。

示例代碼：

import React from "react";import Chart from "d3act";export default class ExampleBubbleChart extends React.Component {
    constructor(props) {        super(props);        this.state = {
            data: {
                children: [
                    { name: "Alaa", value: 1 },
                    { name: "Zaid", value: 1 },
                    { name: "Kareem", value: 2 },
                    { name: "Mahmoud", value: 1 },
                    { name: "Tariq", value: 1 },
                    { name: "Shareef", value: 1 },
                    { name: "Tom", value: 41 },
                    { name: "Forest", value: 2 },
                    { name: "John", value: 84 },
                    { name: "Alex", value: 11 },
                    { name: "Donald", value: 7 },
                    { name: "Mark", value: 29 },
                    { name: "Charles", value: 20 },
                    { name: "Quincy", value: 5 },
                    { name: "Alvan", value: 1 },
                    { name: "Don", value: 32 },
                    { name: "Hassan", value: 2 },
                    { name: "Jordan", value: 8 },
                    { name: "Michael", value: 32 },
                    { name: "Steven", value: 5 },
                    { name: "Rafael", value: 2 },
                    { name: "Rick", value: 12 },
                ]
            }
        }
    }    render () {        return (            <div className="main">
                <Chart
                    type={"bubble"}
                    diameter={500}
                    showTooltips={true}
                    data={this.state.data}
                />
            </div>
        );
    }
}

React.render(React.createElement(ExampleBubbleChart), document.getElementById('content'))

import React from "react";import Chart from "d3act";export default class ExampleBubbleChart extends React.Component {
    constructor(props) {        super(props);        this.state = {
            data: [
                { xValue: "React", yValue: 2 },
                { xValue: "Relay", yValue: 12 },
                { xValue: "GraphQL", yValue: 5 },
                { xValue: "Radium", yValue: 7 },
                { xValue: "Babel", yValue: 5 },
            ]
        }
    }    render () {        return (            <div className="main">
                <Chart
                    type={"bar"}
                    width={500}
                    height={500}
                    margin={{ top: 40, right: 40, bottom: 40, left: 40 }}
                    showTooltips={true}
                    data={this.state.data}
                />
            </div>
        );
    }
}

React.render(React.createElement(ExampleBubbleChart), document.getElementById('content'));