用D3.js(React) 画一个超简单的图表

我们把上一篇博文里的架构再拿过来用。

第一步

清空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中追加矩形