数据可视化在作业当中的应用

数据可视化我用了d3去实现

home.js

import React from 'react';
import Layout from '../components/layout';
import './style.scss';
import Api from '../../js/Api';
import Util from '../../js/Util';
import { connect } from 'react-redux';
import WordCloud from 'react-d3-cloud';
//这里运用了d3中的词云工具,下面是定义每条信息的大小的一个函数
const fontSizeMapper = (word) => Math.log2(word.value) * 5;

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
  }

  componentDidMount() {
    this.initTableData();
  }
    //我们要做的就是随机生成豆瓣中的简短介绍，然后加入到一个数组当中
    //再利用worldcould组件来生成词云
  initTableData(current, params) {
    const token = Util.getToken();
    Api.get(`/douban/getAll`, {
      headers: { Authorization: `Bearer ${token}` },
    }).then((res) => {
      if (res.data) {
        const { data } = res.data || {};
        const result = [];
        data.forEach((element) => {
            //把每条信息插入，信息源时豆瓣表格中的quote，value是其大小
          result.push({ text: element.quote, value: parseInt(Math.random() * 100) });
        });
        this.setState({
          list: result,
        });
      }
    }

    );
  }
//render中渲染出词云组件
  render() {
    const { list } = this.state;
    const { userData } = this.props;
    // const { name } = userData;
    return (
      <div>
        <Layout>
          <div className="word-cloud">
            <WordCloud width={1200} data={list} fontSizeMapper={fontSizeMapper} rotate={0} />,
          </div>
        </Layout>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    userData: state.userData.data,
  };
};

export default connect(mapStateToProps, null)(Home);

我们可以看到每次的都是不一样的