我们把上一篇博文里的架构再拿过来用。
第一步
清空src/App.js里的className为App里的内容和componentDidMount方法
初始src/App.js如下:
import React, { Component } from 'react';
import * as d3 from 'd3';
import './App.css';
class App extends Component {
componentDidMount () {
}
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
第二步
编写componentDidMount方法
1) 添加svg
componentDidMount () {
const width = 300, height = 300; // 画布的宽高
let svg = d3.select('.App') // 选择文档中第一个class为App的元素
.append('svg') // 添加一个svg元素
.attr('width', width)
.attr('height', height);
}
2) 在svg中追加矩形