第一個D3.js(React) 程序

第一步

使用npx指令創建react項目，項目名爲d3-demo。

npx create-react-app d3-demo
cd d3-demo
npm start

此時你可以在瀏覽器中看到：

此時的文件目錄如下：

第二步

安裝d3 node包。

npm install --save d3

第三步

在js中引入d3。

找到src/App.js，文件頭部加入：

import * as d3 from 'd3';

此時的src/App.js文件代碼如下：

第四步

替換<header>標籤內的內容：

<h1>Hello World!</h1>

編寫componentDidMount函數，修改h1的color爲blue：

  componentDidMount () {
    d3.select('h1').style('color', 'blue');
  }

此時的src/App.js文件代碼如下：

保存後，查看localhost:3000

此時頁面顯示爲：

成功！

上面我們使用了d3的select方法，該方法返回Selection實例。我們可以通過控制檯打印出來看：

屬性_groups和_parents是兩個數組，分別存放着，符合條件的元素本身和其最外層父元素(?)。

我們通過調用Selection的style方法，修改選中元素的樣式。

---

接下來，我們再向外星人 👽來介紹下我們的國家。

第一步：豐富頁面

第二步：豐富componentDidMount方法

最終src/App.js代碼如下：

import React, { Component } from 'react';
import * as d3 from 'd3';
import './App.css';

class App extends Component {

  componentDidMount () {
    d3.select('body').style('background', '#171e2c');
    d3.select('header').style('min-height', 'auto');
    d3.select('header').select('h1').style('color', 'blue');
    console.log(d3.select('header').select('h1'));
    d3.select('article').select('h1').style('color', '#fff');
    d3.selectAll('p')
        .style('color', '#fff')
        .style('text-indent', '35px')
        .style('text-align', 'left');
    console.log(d3.selectAll('p'));
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Hello World!</h1>
        </header>
        <article>
          <h1>中華人民共和國</h1>
          <p>
            中華人民共和國（People's Republic of China），
            簡稱“中國”，成立於1949年10月1日，
            位於亞洲東部，太平洋西岸，
            是工人階級領導的、以工農聯盟爲基礎的人民民主專政的社會主義國家，
            以五星紅旗爲國旗、《義勇軍進行曲》爲國歌，
            國徽內容爲國旗、天安門、齒輪和麥稻穗，
            通用語言文字是普通話和規範漢字，
            首都北京，
            是一個以漢族爲主體、56個民族共同組成的統一的多民族國家。
          </p>
          <p>
            中國陸地面積約960萬平方千米，東部和南部大陸海岸線1.8萬多千米，內海和邊海的水域面積約470多萬平方千米。
            海域分佈有大小島嶼7600多個，其中臺灣島最大，面積35798平方千米。
            中國同14國接壤，與8國海上相鄰。省級行政區劃爲23個省、5個自治區、4個直轄市、2個特別行政區。
          </p>
        </article>
      </div>
    );
  }
}

export default App;

標籤p中的內容摘自百度百科。

通過上面代碼，我們

• 將頁面設置爲暗黑系（怕來自宇宙的朋友 👽見到太亮的網頁不適應）
• 修改header標題最小高度
• 將header中h1的顏色設置爲藍色（暗示外星朋友 👽現在訪問的網頁來自地球 🌍）             
• 將article中h1的顏色設置爲白色
• 將所有p標籤的顏色設置爲白色，並且在首行空35px，還要左對齊

我們來看下現在的頁面：

上面代碼我們又使用了d3的selectAll方法，該方法返回Selection實例。我們可以通過控制檯打印出來看：

第一個Selection是 console.log(d3.select('header').select('h1')); 的結果

第二個Selection是 console.log(d3.selectAll('p')); 的結果