Beijing_data_vis_3

Ready to code?

在开始之前，先简单复习一下d3如何与react兼容的。

• d3, data-driven documents,是JavaScript的一个库，用来处理和展示数据的。通过直接操控DOM节点来进行对元素的增减修改
• 而react是采用一种非常聪明的方式来操控DOM节点—模拟并与实际DOM节点比较来更新。

因此如果‘不恰当’使用可能会引起相互干扰，不可预知的问题。就像一对夫妻一样，如果他们一直在做同一件事，那么麻烦不可避免:)

最简单的方式就是给彼此留有活动空间！让老婆去看剧，自己洗碗

因此我遵循的基本理念是让d3老婆独自在卧室看综艺，react自己在厨房管理自己的小组件。 等饭做好了，喊老婆吃饭。

言归正传，首先创建以个组件，用来收纳我们要用d3制作的图标。在返回一个内容为空的div，主要是为了让我们的d3知道要从哪里开始画图。

reder(){return <div className="viz" />}

利用componentDidMount和componentDidUpdate可以用载入更新的数据。因此，在其内部我们传入一个函数接受其更新的数据。这个函数正是我们的老婆大人—我们喊她来帮我们制图。

componentDidMount(){
		draw(this.props)
}

componentDidUpdate(prevProps,prevState){
	 draw(this.props)
}

创建一个新js文件，载入我们所需要的d3库.接下来就可以使用d3的方式来制图了，最后将其打包暴露出来即可

import * as d3 from 'd3'

export default draw(props)=>{ d3.select('.viz')......}

---