摘要：的一點理解用其官網的話來說是一個用于數據可視化的庫。其將數據與綁定，通過建立數據與元素樣式之間的關系，來表現數據，實現可視化。它也是上星第多的庫。

用其官網的話來說：

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

成果圖如下

代碼如下

  ...
  
  

  

選擇畫布

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

創建元素，通過元素的樣式來表現數據

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

將元素添加到畫布上

chart.appendChild(div)

整個思路中，首先要注意數據與元素數量之間的關系

有多少組數據，就應該對應有多少個元素

其次就是建立數據與元素樣式之間的函數關系，

例如數據與元素寬度之間的函數關系

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

數據與元素文本內容之間的函數關系

function (data) {
  return data;
}

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

用d3實現同樣效果如下

數據

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

如果在 .chart 中有對應數量的 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") 來添加相應數量的元素

其中 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 中有過多數量的 div

那么就需要將多余的 div 移除，通過 exit().remove() 來實現

其中 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 中，數據與 DOM 元素并不是雙向綁定的，在將數據綁定到元素之后，再次修改數據，元素并不會產生對應的變化

所以數據更新要手動完成

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提供的選擇方法，能處理數據與元素數量不匹配的情況

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

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

d3方便了通過元素的樣式來展現數據的過程，用戶自己定義數據與元素樣式之間的函數關系