今天要講的是D3的資料處理，以及該如何用資料渲染畫面。

在前一篇文章中已經有教大家如何使用D3在SVG畫布上畫圖，但該如何依照不同的數據畫出相對應的元素呢？
我們先來看第一個例子：

今天我有一組數據[1, 2, 3, 4, 5]，要怎麼在畫面中寫出這五個數字？

如果有一些程式經驗的人，想法一定會是用for迴圈一一把值創建出來，不過D3只要用到selectAll()、data()及enter()這幾個function就能做到這件事情。（這邊背後的原理將會在下一章提到，這裡就先看看基本的數據是怎麼寫的）

我們先不管內容，先寫出五個資料再說：

const data = [1, 2, 3, 4, 5];
const body = d3.select('body'); //定義選取body
const texts = body.selectAll('p').data(data); //定義選取p以及連結資料
texts.enter() //加入資料
     .append('p') //放入p元素
     .text('Hello'); //在p元素中寫入Hello

如此一來就能在畫面上看到五個Hello了

接著修改一下code，那些改變屬性的function如style()、attr()、text()等，都能傳入一個callback function，如此一來就能依照不同的資料給予不同的值。

const data = [1, 2, 3, 4, 5];
const body = d3.select('body');
const texts = body.selectAll('p').data(data);
texts.enter()
   .append('p')
   .text((d, i) => {
     return `${d}-index為${i}`
   });

第一個資料視覺化

有了該怎麼處理資料的概念以後，我們開始在SVG中畫圖。

我們把上面的問題改成：

我想得到半徑為1、2、3、4、5的圓形

<svg width="600" height="400" id="painter"></svg>

const data = [1, 2, 3, 4, 5];
const body = d3.select('#painter');
const circles = body.selectAll('circle').data(data);
circles
    .enter()
    .append('circle')
    .attr('cx', (d, i) => {
      return (i * 10) + 10;
    })
    .attr('cy', 10)
    .attr('r', (d) => {
      return d;
    })
    .attr('fill', 'black');

我們的第一個資料視覺化圖表就完成囉！