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

用其官網(wǎng)的話來說：

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是一個用于數(shù)據(jù)可視化的JS庫。其將數(shù)據(jù)與DOM綁定，通過建立數(shù)據(jù)與DOM元素樣式之間的關(guān)系，來表現(xiàn)數(shù)據(jù)，實現(xiàn)可視化。它也是github上星第4多的JS庫。

成果圖如下

代碼如下

  ...
  
  

  

選擇畫布

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

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

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

將元素添加到畫布上

chart.appendChild(div)

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

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

其次就是建立數(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;
}

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

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

數(shù)據(jù)

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

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

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

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

如果沒有 div 元素，就需要通過 enter().append("div") 來添加相應(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 中有過多數(shù)量的 div

那么就需要將多余的 div 移除，通過 exit().remove() 來實現(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ù)，元素并不會產(chǎn)生對應(yīng)的變化

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

function update(data) {
      d3.select(".chart")
        .selectAll("div")
        .data(data)
        .style("width", function (d) {
          return d + "px";
        })
        .text(function (d) {
          return d;
        })
     // 如果元素不夠，補足
      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()
    }

完整實驗代碼

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

當元素數(shù)量不夠時，通過enter()能選擇到那些用于補足的元素

當元素數(shù)量過多時，通過exit()能選擇那些過剩的元素

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