React+Dva使用d3绘图

React+Dva环境中使用d3绘图

本文以D3中的Example为例，将其导入本项目中，项目基于React和Dva，作者假设读者已经能够通过Dva异步获取D3所需的数据。
文件代码结构如下：

// index.jsx
import { connect } from 'dva';
import React, { Component } from 'react';
import * as d3 from "d3";
class index extends Component {// 构造函数constructor(props) {super(props)}// 使用D3js绘制print = (data) => {}// 处理下拉框事件响应handleSelect({ target }) {}// 绘制函数render() {}
}
// ---------------------------------------------------------------
// 下面通过Dva的connect方法将视图与数据绑定，因此在index中可以通过props来获取
// mapStateToProps中的数据，即 const { alphabet } = this.props;
const mapStateToProps = state => {return {alphabet: state.demoPage.alphabet};
};
const mapStateToDispatch = dispatch => ({});export default connect(mapStateToProps, mapStateToDispatch)(index);

其中print方法是绘图的核心部分，参考D3例子，直接将代码Copy进来即可。需要注意的是官网例子中chart = {}需要改写成chart = () => {} 方法，变量名前加上const或者let声明。print方法如下：

print = (data) => {if (!data) {// 数据为空时，需要返回空divreturn document.createElement('div')}// 在Dva中的effects里通过异步请求已经拿到了数据，因此这里只需要将数组转为json即可const _data = data.map(line => ({ name: line[0], value: line[1] }))const margin = ({ top: 20, right: 0, bottom: 30, left: 40 }),height = 150,width = 300// 注意假设变量声明标识符const yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)).call(g => g.select(".domain").remove())const xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x).tickSizeOuter(0))const y = d3.scaleLinear().domain([0, d3.max(_data, d => d.value)]).nice().range([height - margin.bottom, margin.top])const x = d3.scaleBand().domain(_data.map(d => d.name)).range([margin.left, width - margin.right]).padding(0.1)const chart = () => {const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);const bar = svg.append("g").attr("fill", "steelblue").selectAll("rect").data(_data).join("rect").style("mix-blend-mode", "multiply").attr("x", d => x(d.name)).attr("y", d => y(d.value)).attr("height", d => y(0) - y(d.value)).attr("width", x.bandwidth());const gx = svg.append("g").call(xAxis);const gy = svg.append("g").call(yAxis);return Object.assign(svg.node(), {update(order) {x.domain(_data.sort(order).map(d => d.name));const t = svg.transition().duration(750);bar.data(_data, d => d.name).order().transition(t).delay((d, i) => i * 20).attr("x", d => x(d.name));gx.transition(t).call(xAxis).selectAll(".tick").delay((d, i) => i * 20);}});}return chart()
}

可以看出代码除了少部分改动外，与官网案例区别不大。

接下来在构造函数中添加下拉框选项及order函数

constructor(props) {super(props)this.options = [{ label: "Alphabetical", value: (a, b) => a.name.localeCompare(b.name) },{ label: "Frequency, ascending", value: (a, b) => a.value - b.value },{ label: "Frequency, descending", value: (a, b) => b.value - a.value }]
}

handleSelect方法设置选择响应事件，即调用print方法返回的对象中的updata方法，参数为排序算法order。

handleSelect({ target }) {this.chartEl.update(this.options.filter(op => target.value === op.label)[0].value)
}

最后实现render方法，注意ref={(ref) => { ref && ref.appendChild(chartEl) }} 将chartEl作为子元素插入到了div中，而不是使用JSX插入。

render() {const { alphabet } = this.props;const chartEl = this.chartEl = this.print(alphabet)return (<div><select onChange={this.handleSelect.bind(this)}>{this.options.map(op => (<option key={op.label} value={op.label}>{op.label}</option>))}</select><div ref={(ref) => { ref && ref.appendChild(chartEl) }}></div></div>)
}

React+Dva使用d3绘图相关推荐

React+dva+antd的运用
前言技术资料 react + dva + redux + react-router + redux-sage + antd + antd动画总的来说dva是一个很简单的项目一步步跟大家来说一下把 ...
跟我一起学 React + dva + Mockjs（9 个视频）
跟我一起学 React + dva + Mockjs(9 个视频) 跟我一起学 React + dva + Mockjs #1 课程介绍「04:21」跟我一起学 React + dva + Mock ...
React+DVA开发实践
原文链接文档概述本文档在前面章节简单的介绍了React和其相关的一系列技术,最后章节介绍了React+Dva开发的整套过程和基本原理,也就是将一系列框架整合的结果. 文档结构本文档划分为以下章节 ...
react：react + dva + router + roadhog 基础项目搭建
一.脚手架安装第一步:全局安装 dva,这里有个条件,node 版本要 >= 6.5 且 dva-cli 版本要在 0.7x. npm install dva-cli -g 第二步:查看版本号 ...
react+dva+antd的骚操作
文章目录前言: 第一步: 第二步, 第三步, 第四步, 第五步, 第六步, 第七步, 第八步, 第九步, 第10步, 个人博客前言: 原谅我直接跳过react的基础,直接就讲react+dva的实 ...
React+dva+webpack+antd-mobile 实战分享（二）
第一篇 https://segmentfault.com/a/11... 在上一篇文章中教给大家了怎么搭建项目的架子:那么今天我们就来说一下项目里的导航和列表的实现导航废话不说啦下面直接给大家讲 ...
react+dva+antd接口调用方式
一丶安装通过 npm 安装 dva-cli 并确保版本是0.8.1或以上. $ npm install dva-cli -g $ dva -v 0.8.1 二丶创建新应用安装完dva-cli之后 ...
antd 进行ajax请求,react+dva+antd接口调用方式
一丶安装通过 npm 安装 dva-cli 并确保版本是0.8.1或以上. $ npm install dva-cli -g $ dva -v 0.8.1 二丶创建新应用安装完dva-cli之后 ...
antd 怎么用ajax,react+dva+antd接口调用方式
一丶安装通过 npm 安装 dva-cli 并确保版本是0.8.1或以上.$ npm install dva-cli -g $ dva -v0.8.1 二丶创建新应用安装完dva-cli之后,就 ...
react dva 相关
models /** * Created by AndyCui on 2018/12/3. */import { getWallet, getApplyChar, getResourcesCount, ...

React+Dva使用d3绘图

React+Dva环境中使用d3绘图

React+Dva使用d3绘图相关推荐

最新文章

热门文章