D3JsDay09 资料元素来绑定，让你元素有内定—资料绑定

资料绑定

datum()函式

前面的文章多半是在使用D3来操作DOM，这边主要探讨D3的核心，将资料绑定在DOM的元素中，换句话说DOM的元素样貌可以透过资料来改变，例如当资料数值是比较大的情况时，你所绘制的div或是svg的circle半径也随之变大。

先看以下范例

首先我们先创建一个阵列，然後使用for回圈以阵列长度作为回圈数，之後依序添加div这边有一个特别的datum()函式，我们尝试着将每一笔的阵列内容放入函式当中当作参数，最後加入text()函式在其中放入一个回呼函式参数加入d并且return出来就可以看到画面呈现。

const arr = [7,2,5,4,13];
for(let i=0; i<arr.length; i++){    
  d3.select("body")
  .append("div")
  .datum(arr[i])
  .text(function(d){
      return d;
  })
}

画面呈现如下图

这时候可以发现在添加的div透过datum()绑定上去了，你可以尝试着将上述第5行的 .datum(arr[i])注解掉应该会发现网页画面的数字不见了。另一个方式你可以撰写console.log印出里面的div包含的data讯息

程序码如下

const arr = [7,2,5,4,13];
  for(let i=0; i<arr.length; i++){    
    d3.select("body")
    .append("div")
    .datum(arr[i])
    .text(function(d){
        return d;
    })
  }
const allDataInDiv = d3.select("body").selectAll("div")["_groups"][0];
  for(let i=0; i<allDataInDiv.length;i++){
      console.log(allDataInDiv[i]);
}

开启开发人员工具可以发现div被添加了__data__在里面，如下图

所以我们才可以透过text()回呼函式来获得d参数，而d所表示的就是资料的意思

data()函式

查看以下程序码我们预先在body撰写空的div，这次使用selectAll来一次选取所有的div并且改用data()放入整个阵列，此时一样可以达到之前所用datum()范例所创立的样貌，因此可以这麽理解是data()会将阵列的各项分别绑定到选择的各元素。

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  <script>
     const arr = [7,2,5,4,13];
     d3.select("body")
     .selectAll("div")
     .data(arr)
     .text(function(d){ return d});
  </script>
</body>

data()和datum比较

与datum的差异你可以将.data(arr)换成.datum(arr)之後看画面呈现更能看得出其中的奥妙

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <script>
    let arr = [7,2,5,4,13];
    d3.select("body")
    .selectAll("div")
    .datum(arr)
    .text(function(d){ return d});
  </script>
</body>

此时你会看到如下图，datum()会直接将整个阵列绑在每一个div上面，多半我们在处理资料的时候会使用data()来绑定较为容易。

透过函式将样式改变

若我们希望在大於6的数值就呈现红色的话，我们透过style()操作它的样式，由於已经绑定资料在元素上，因此我们一样可以在第二个参数带入d承接资料并透过if来判断大於6的函式return红色

const arr = [7,2,5,4,13];
   d3.select("body")
   .selectAll("div")
   .data(arr)
   .text(function(d,i,n){ 
     return d;
    })
    .style(
        "color",function(d){
        if(d>6){
            return "red";
        }
    });

结果呈现如下图

关於data和text的函式的其他说明

text()函式介绍

text在绑定之後函数可以拥有三个参数，第一个参数是d表示data的意思，第二个参数是i表示阵列的索引值，第三个参数表示当前绑定的群组节点

你可以将下列程序码执行看看并且开启开发者人员工具。

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <script>
     const arr = [7,2,5,4,13];
     d3.select("body")
     .selectAll("div")
     .data(arr)
     .text(function(d,i,n){ 
         console.log(d);
         console.log(i);
         console.log(n);
    });
  </script>
</body>

这边撷取第一次回圈所呈现的图片，7表示阵列第一笔资料，0表示index索引值，最後的n表示当前绑定的元素节点。

参考官方textAPI说明

另外data()或datum若没有带入参数的时候可以得到绑定的数据
下面程序码以data()为例

const arr = [7,2,5,4,13];
   d3.select("body")
   .selectAll("div")
   .data(arr)
   .text(function(d,i,n){ 
     return d;
});
console.log(    d3.select("body")
   .selectAll("div")
   .data());

或是以datum()为例

let arr = [7,2,5,4,13];
   d3.select("body")
   .selectAll("div")
   .data(arr)
   .text(function(d,i,n){ 
     return d;
});
console.log(
    d3.select("body")
   .select("div")
   .datum()
);

以上就是关於资料绑定的部分下一篇将会介绍关於资料绑定时候需要注意的细节。

<<: day9 Kotlin coroutine 的黑魔法 suspend

>>: C#入门之字符串转义

D3JsDay09 资料元素来绑定，让你元素有内定—资料绑定

资料绑定

datum()函式

data()函式

data()和datum比较

透过函式将样式改变

关於data和text的函式的其他说明

text()函式介绍

[访谈] APCS x 资工学长 Bogay

【踩坑】按钮闪阿闪，gradient 在 hover 时闪烁

Day 27 - 利用 WireGuard 建立点对点隧道

我的第一份实习

表格元件共用攻略

30天零负担轻松学会制作APP介面及设计【DAY 11】

IOS、Python自学心得30天 Day-23 Firebase衔接Python-1

开发环境与部署环境不同时的解决方案

Python - 根据输入的英文字母排列出有意义的单词-参考笔记

Day4.Cortex-M 系列基础探讨