D3actD3 和 React 结合
D3act 可以创建一个轻量级的 React 组件包装，它将 React 整个生命周期的方法 componentDidMount, componentDidUpdate 和 componentWillUnmount 映射到了 D3 图表的 create, update 和 unmount 方法中。
当涉及到数据可视化的时候，D3 就是实际上的标准，React 近期已经成为 go-to 库，用于构建用户界面。 D3 和 React 都是数据中心库，二者是天作之合。D3 专注于数据驱动，而 React 解决了构建大型应用时的数据改变问题。
示例代码：
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'));
评论