摘要：的一點(diǎn)理解用其官網(wǎng)的話來(lái)說(shuō)是一個(gè)用于數(shù)據(jù)可視化的庫(kù)。其將數(shù)據(jù)與綁定，通過(guò)建立數(shù)據(jù)與元素樣式之間的關(guān)系，來(lái)表現(xiàn)數(shù)據(jù)，實(shí)現(xiàn)可視化。它也是上星第多的庫(kù)。

用其官網(wǎng)的話來(lái)說(shuō)：

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.

D3是一個(gè)用于數(shù)據(jù)可視化的JS庫(kù)。其將數(shù)據(jù)與DOM綁定，通過(guò)建立數(shù)據(jù)與DOM元素樣式之間的關(guān)系，來(lái)表現(xiàn)數(shù)據(jù)，實(shí)現(xiàn)可視化。它也是github上星第4多的JS庫(kù)。

成果圖如下

代碼如下

  ...
  
  

  

選擇畫布

let chart = document.getElementsByClassName("chart")[0]

創(chuàng)建元素，通過(guò)元素的樣式來(lái)表現(xiàn)數(shù)據(jù)

let div = document.createElement("div")
div.style.width = `$dnkpnhlppx`
div.textContent = d

將元素添加到畫布上

chart.appendChild(div)

整個(gè)思路中，首先要注意數(shù)據(jù)與元素?cái)?shù)量之間的關(guān)系

有多少組數(shù)據(jù)，就應(yīng)該對(duì)應(yīng)有多少個(gè)元素

其次就是建立數(shù)據(jù)與元素樣式之間的函數(shù)關(guān)系，

例如數(shù)據(jù)與元素寬度之間的函數(shù)關(guān)系

function (data) {
  return data + "px";
}

數(shù)據(jù)與元素文本內(nèi)容之間的函數(shù)關(guān)系

function (data) {
  return data;
}

我個(gè)人覺(jué)得，d3的 Data-Driven Documents，主要體現(xiàn)就是以上兩點(diǎn)

用d3實(shí)現(xiàn)同樣效果如下

數(shù)據(jù)

let data = [30, 86, 168, 281, 303, 365]

如果在 .chart 中有對(duì)應(yīng)數(shù)量的 div

那么就不需要額外添加 div 元素

d3.select(".chart")
      .selectAll("div")
      .data(data)
      .style("width", function (d) {
        return d + "px";
      })
      .text(function (d) {
        return d;
      });

如果沒(méi)有 div 元素，就需要通過(guò) enter().append("div") 來(lái)添加相應(yīng)數(shù)量的元素

其中 enter()

Returns the enter selection: placeholder nodes for each datum that had no corresponding DOM element in the selection. (The enter selection is empty for selections not returned by selection.data.)

d3.select(".chart")
      .selectAll("div")
      .data(data)
      .enter().append("div")
      .style("width", function (d) {
        return d + "px";
      })
      .text(function (d) {
        return d;
      })

如果在 .chart 中有過(guò)多數(shù)量的 div

那么就需要將多余的 div 移除，通過(guò) exit().remove() 來(lái)實(shí)現(xiàn)

其中 exit()

Returns the exit selection: existing DOM elements in the selection for which no new datum was found. (The exit selection is empty for selections not returned by selection.data.)

d3.select(".chart")
      .selectAll("div")
      .data(data)
      .style("width", function (d) {
        return d + "px";
      })
      .text(function (d) {
        return d;
      })
      .exit().remove()

首先要知道在 d3 中，數(shù)據(jù)與 DOM 元素并不是雙向綁定的，在將數(shù)據(jù)綁定到元素之后，再次修改數(shù)據(jù)，元素并不會(huì)產(chǎn)生對(duì)應(yīng)的變化

所以數(shù)據(jù)更新要手動(dòng)完成

function update(data) {
      d3.select(".chart")
        .selectAll("div")
        .data(data)
        .style("width", function (d) {
          return d + "px";
        })
        .text(function (d) {
          return d;
        })
     // 如果元素不夠，補(bǔ)足
      d3.select(".chart")
        .selectAll("div")
        .data(data)
        .enter().append("div")
        .style("width", function (d) {
          return d + "px";
        })
        .text(function (d) {
          return d;
        })
    // 如果元素多余，移除
      d3.select(".chart")
        .selectAll("div")
        .data(data)
        .exit().remove()
    }

完整實(shí)驗(yàn)代碼

d3提供的選擇方法，能處理數(shù)據(jù)與元素?cái)?shù)量不匹配的情況

當(dāng)元素?cái)?shù)量不夠時(shí)，通過(guò)enter()能選擇到那些用于補(bǔ)足的元素

當(dāng)元素?cái)?shù)量過(guò)多時(shí)，通過(guò)exit()能選擇那些過(guò)剩的元素

d3方便了通過(guò)元素的樣式來(lái)展現(xiàn)數(shù)據(jù)的過(guò)程，用戶自己定義數(shù)據(jù)與元素樣式之間的函數(shù)關(guān)系