D3的一点理解

摘要：的一点理解用其官网的话来说是一个用于数据可视化的库。其将数据与绑定，通过建立数据与元素样式之间的关系，来表现数据，实现可视化。它也是上星第多的库。

用其官网的话来说：

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 = `${d}px`
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方便了通过元素的样式来展现数据的过程，用户自己定义数据与元素样式之间的函数关系