前言

基于d3js 5.5版本基礎(chǔ)教程

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)莘縣免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

環(huán)境配置

下載最新d3js文件, 參考: d3js官網(wǎng)

當(dāng)前版本5.5, d3js v4與v3之間的api有一定的差異。

選擇元素

d3主要有兩個選擇器

• select

  選擇相應(yīng)的dom元素, 如果有多個, 選擇第一個

• selectAll

  選擇所有的指定的dom元素.

通過選擇器可以選擇相應(yīng)得dom元素, 而選擇器的語法基本就是css選擇器的語法.

css選擇器語法: http://www.w3school.com.cn/c***ef/css_selectors.asp

增刪查改

假設(shè)網(wǎng)頁有以下元素, 關(guān)于d3的元素操作都將引用本段落

// 省略html,head等標(biāo)簽

    
    
段落1
    
段落2
    
段落3
    

元素增加

• append

  在選擇的元素中增加一個子元素,

  示例: 
  d3.select("body").append("p") //將會在svg后面增加一個內(nèi)容為空的p元素

• insert

  在選擇的元素里面或者前面增加一個元素,

  示例1:
  d3.select("body").insert("p") //與append方法一致
  
  示例2:
  d3.select("body").insert("p", "p") //第一個參數(shù)為要插入的元素, 第二個元素為before, 即首先通過第二個參數(shù)選擇相應(yīng)位置，在這個選擇的元素之前插入一個元素
  

  內(nèi)容修改

• text

  修改元素的文本內(nèi)容

  示例:
  d3.select("p").text("段落一修改后的內(nèi)容") // 將段落一的內(nèi)容修改為text函數(shù)傳入的參數(shù)，如果傳入的文本包含html標(biāo)簽，則會被轉(zhuǎn)義

• html

  修改元素內(nèi)容

  示例:
  d3.select("p").html("
  段落一修改后的內(nèi)容
  ") // 將段落一的內(nèi)容修改為text函數(shù)傳入的參數(shù)，如果傳入的文本包含html標(biāo)簽，不會被轉(zhuǎn)義

屬性增加修改

• attr

  增加或者修改屬性(如果屬性已存在)

  示例:
  d3.select("svg rect").attr("width", 200) //將選擇的rect元素width屬性修改為200

• style

  增加或這修改樣式(如果屬性已存在)

  示例:
  d3.selectAll("p").style("color", "#ff0000") //選擇所有p元素，并將其文字顏色設(shè)置為紅色

• property

  增加或這修改樣式(如果屬性已存在)

  示例:
  d3.select("input").property("checked",true); //選擇第一input元素，將checked屬性設(shè)置為true

元素刪除

• remove

  將選定的元素刪除

  示例:
  d3.select("p").remove //選擇第一個p元刪除

鏈?zhǔn)讲僮?/h3>

d3與jQuery有一樣的鏈?zhǔn)讲僮? 只要操作合法你可以一直鏈接下去

示例:
//首先選擇第一個p元素然后將元素的文本內(nèi)容修改為'修改后內(nèi)容',并將其文字顏色設(shè)置為紅色
d3.select("p")
  .text("修改后內(nèi)容")
  .style("color", "red") 

數(shù)據(jù)綁定與加載

數(shù)據(jù)綁定

• datum

  將一個數(shù)據(jù)綁定到所有選擇的元素上

  // 通過datum元素將"datum"數(shù)據(jù)傳入, 在text方法里面?zhèn)魅胍粋€箭頭函數(shù)，而箭頭函數(shù)直接返回數(shù)據(jù)
  d3.selectAll("p")
    .datum("datum")
    .text((d, i) => d)
  
  // 修改后的內(nèi)容如下
  ...省略不相內(nèi)容
  datum
  datum
  datum

• data

  傳入一組數(shù)據(jù)，分別于選擇的元素一一綁定

  // 通過datum元素將"datum"數(shù)據(jù)傳入, 在text方法里面?zhèn)魅胍粋€箭頭函數(shù)，而箭頭函數(shù)直接返回數(shù)據(jù)
  d3.selectAll("p")
    .data([1,2,3])
    .text((d, i) => d)
  
  // 修改后的內(nèi)容如下
  ...省略不相關(guān)內(nèi)容
  1
  2
  3

• update, enter, exit

參考圖片內(nèi)容:

網(wǎng)絡(luò)數(shù)據(jù)加載

d3內(nèi)置數(shù)據(jù)加載的方法，可以解析比較常見的數(shù)據(jù)格式，主要有以下四種，這里主要以csv文件個數(shù)數(shù)據(jù)作為示例

• d3.csv
• d3.json
• d3.tsv
• d3.xml

csv文件內(nèi)容如下
//data.csv
name, age
zhangsan, 11
wangwu, 22
lisi, 33

// 加載csv
d3.csv("data.csv", (data) => {
    console.log(data)
})

// 輸出, d3已經(jīng)將csv格式的數(shù)據(jù)解析成可識別的對象
{name: "zhangsan", " age": " 11"}
{name: "wangwu", " age": " 22"}
{name: "lisi", " age": " 33"}

事件

d3自然也可以監(jiān)聽相應(yīng)的事件。
常用事件如下:

// 選擇所有的p元素，當(dāng)鼠標(biāo)移到相應(yīng)的p元素上面，p元素的字體顏色就會變成橙色，移出的時候就會變成紅色
d3.selectAll("p")
      .on("mouseover", function(){
          d3.select(this)
            .style("color", "orange");
      })
      .on("mouseout", function() {
        d3.select(this)
            .style("color", "red");
      })

動畫

可以通過以下四個過程使得選定的元素生成動態(tài)效果

• transition

  啟動動畫效果

• duration

  動畫時間，單位為毫秒

• ease

  過渡方式, 默認(rèn)為線性過渡

• delay

  延遲時間，在指定的一段時間后才啟動動畫

// 選中第一個元素，先延遲延遲一秒，動畫時間2秒，在兩秒內(nèi)同時從默認(rèn)的顏色漸變到紅色，字體大小從默認(rèn)大小變成50px
d3.select("p")
      .transition()
      .delay(1000)
      .duration(2000)
      .style("background-color", "red")
      .style("font-size", "50px")

縮放

由于使用的數(shù)值與圖片中的長寬數(shù)值有一定的差異，比如，圖片長度為500，但是數(shù)值都是在10以內(nèi), 我們做出來的圖一定是需要盡量的填充整個視圖，所以需要對源數(shù)據(jù)做一定的縮放, 下面介紹兩類縮放，d3本身有很多的縮放函數(shù)。

線性縮放

var data = [100, 400, 300, 900, 850, 1000];

var scale = d3.scaleLinear()
            // 源數(shù)據(jù)數(shù)值范圍
            .domain([0, d3.max(data)])
            // 真實距離大小范圍，一般是展示區(qū)長寬
            .range([0, 500]);
console.log(scale(20))
console.log(scale(800))
console.log(scale(1000))

輸出
10
400
500

離散縮放

// 常用于選區(qū)顏色
var index = [0, 1, 2, 3, 4]
var color = ["red", "blue", "green", "yellow", "black"]
var ordinal = d3.scaleOrdinal()
                .domain(index)
                .range(color)
console.log(ordinal(1))
console.log(ordinal(4))
console.log(ordinal(100))

//輸出
blue
black
blue

坐標(biāo)軸

常見圖標(biāo)展示一般都會帶有坐標(biāo)軸，因為坐標(biāo)軸是一個很常用的功能，所以d3有內(nèi)置的函數(shù)用于生成坐標(biāo)軸

可選坐標(biāo)軸

• axisTop
• axisRight
• axisBottom
• axisLeft

上面的上下左右主要指坐標(biāo)周的刻度文字的位置，比如axisTop是指文字在橫軸上面

var width = 400,
    height = 100;

var data = [10, 15, 20, 25, 30];

// 在body元素內(nèi)插入一個svg元素 
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

// 創(chuàng)建一個線性縮放函數(shù)
var scale = d3.scaleLinear()
              .domain([d3.min(data), d3.max(data)])
              .range([0, width - 100]);

// 創(chuàng)建一個坐標(biāo)軸，需傳入縮放函數(shù)
var x_axis = d3.axisBottom()
               .scale(scale);

//在svg函數(shù)里面加入一個g元素，并創(chuàng)建坐標(biāo)軸
svg.append("g")
   .call(x_axis);

坐標(biāo)軸微調(diào)

//旋轉(zhuǎn)坐標(biāo)軸文字
d3.selectAll("svg > g  text")
  .attr("transform", "rotate(45)")
  // 文字沿當(dāng)前方向距離軸位置大小
  .attr("y", 20)

柱狀圖

柱狀圖示例
參考: http://www.tutorialsteacher.com/d3js/create-bar-chart-using-d3js

餅圖

參考: http://www.tutorialsteacher.com/d3js/create-pie-chart-using-d3js

后記

之所以叫做從入門到出門, 是因為本人學(xué)得很快, 忘得更快。

參考鏈接

https://d3js.org/
http://www.tutorialsteacher.com/d3js
http://www.ourd3js.com/wordpress/396/