D3和React结合D3act.zip

时间:2022-08-08 01:26:28
【文件属性】:
文件名称:D3和React结合D3act.zip
文件大小:156KB
文件格式:ZIP
更新时间:2022-08-08 01:26:28
开源项目 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 (                                          
        );     } } 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 (                                          
        );     } } React.render(React.createElement(ExampleBubbleChart), document.getElementById('content')); 标签:D3act
【文件预览】:
d3act-master
----.eslintrc(179B)
----pie.png(30KB)
----package.json(1KB)
----bar.png(53KB)
----bubble.png(87KB)
----LICENSE(1KB)
----Gruntfile.js(1KB)
----src()
--------components()
----.npmignore(515B)
----examples()
--------index.html(183B)
--------app.jsx(7KB)
--------webpack.config.js(465B)
----.gitignore(523B)
----README.md(6KB)
----.jshintrc(429B)

网友评论