一個初學者的指南，使用D3做數據綁定

D3.js 是個強大的數據可視化庫，可以做出驚艷的圖表。比如：氣泡圖，線圖和條形圖－－只需要很少行的代碼

隨着初學者對JavaScript的理解，可以將數組或者對象轉換成一個五彩繽紛的顯示效果。然而，每一個初學者的比較糾結的是一開始理解如何將數據綁定在實際的DOM元素上。這就是我們所知道的“數據綁定”或者叫“數據連接”。這是一個重要的處理，因為這個整個過程的第一步！

非常直觀的，你可能希望使用一個 for() 循環，循環每一項數據並且創建一個元素，像這樣：

    var data = [{x: 100,y: 100},{x: 200,y: 200},{x: 300,y: 300}]
    for(var i = 0; i< data.length;i++){
        svg.append("circle")
            .attr("cx",function(data){ return data[i].x;})
            .attr("cy",function(data){ return data[i].y;})
            .attr("r",2.5);
    }

但是，這並沒有說如何讓它工作，事實上，這里沒有for()循環，下面的這個代碼塊將覆蓋上面的功能：

    var data = [{x: 100,y: 100},{x: 200,y: 200},{x: 300,y: 300}]
    svg.selectAll("circle")
        .data(data)
        .enter().append("circle")
        .attr("cx",function(data){ return data[i].x;})
            .attr("cy",function(data){ return data[i].y;})
            .attr("r",2.5);

這段代碼會添加3個黑色的圓圈到你的SVG cancas,哇，這是因為D3使用了聲明式編程，for()循環隱含在這個代碼塊里。

這篇文章將用於入門，所以我會將上面的代碼塊一行一行的解釋，可以讓你完全理解代碼是如何運行的。我覺得可以將這個比喻為一個蔬菜種植園。當你讀完這篇文章，你將可以建立一個基本的可視化視圖，使用5到10行代碼。

如果你想找一些關於這個概念更多的技術說明，可以去看D3文檔或者Scott Murray的guide to binding

第一步：svg/地塊

首先，你需要選擇一個地方來畫你的可視化試圖。這就相當於你想找一塊地方來種植。

    var svg=d3.select("body")
      .append("svg")
      .attr("weight",'800px')
      .attr("height",'800px');

你創建了一個800px ＊ 800px的地塊--這個"body"--一個你可以加入元素的地方。相當簡單。 

第二步：selectAll/挖洞

接下來，我們需要selectAll()語句來創建一個組，后面我們將用元素填充。想象一下，就像是在你的花園里挖洞。D3可以更新或者移除整個元素組，這是例子：

    svg.selectAll("circle")

如果你沒有添加任何的圓圈，那這個是正常的，請注意，"circle"是SVG specification中一個基本的形狀,如果你添加了圓圈，你可以選擇使用類名，像這樣：

    svg.selectAll(".circleClass")

 

這張圖不是很准確，因為你的花園里可以有無數個洞。沒有什么好的方式使用一張圖合理的說明這塊空地的數量。最重要的是你規划一塊區域，放入你的數據元素。如果你想加入SVG“矩形”元素。你會在你花園的另外一部分添加。在代碼里的這一點，你並不清楚你會添加多少元素。下面就讓我們來弄清楚這個。

第三步：Data/種子

這是最重要的一部分。它決定了你將用於可視化的數據。在JavaScript里，你可以通過數組或者對象傳遞數據，在這一步，你"綁定"你的數據在DOM元素上，DOM元素的類型是你在selectAll()中所指定的。你可以像平時在JavaScript的方式引用數組或者對象的子項。在這個例子里，這里有三個子項在數組中，當我們寫完如下代碼，所以我們希望有三個DOM元素被添加:

    var data = [{x: 100,y: 100},{x: 200,y: 200},{x: 300,y: 300}]
    svg.selectAll("circle")
        .data(data)

這很像選擇一種特定類型的種子種在你的花園里。每個類型的種子都有一定的特性，並且我們知道這些種子的類型。

 

第四步：Enter/把種子放入洞里

.enter() 方法匹配selectAll語句中數組或者對象的子項數量，並且決定了你需要創建的元素的數量。你不再擁有一個無限土地。洞的數量現在匹配你想要種的植物的數量：

    svg.selectAll("circle")
        .data(data)
        .enter()

 

在這個例子的代碼中，有三個坑，種子是一種特定的類型（比如：土豆），這也決定了你的代碼會自動迭代的次數(3次)

第五步：Append/植物的結構

.append()方法決定了你使用哪種SVG基本形狀,盡管你有很多選項在selectAll()語句中，但在這一步你只有7種形狀可以選擇。selectAll()是為一組命名，append()是命名為實際的形狀。

    svg.selectAll("circle")
        .data(data)
        .enter().append("circle")

這跟你植物的結構很相似，你想要你的植物長成什么樣子？如果你想長成番茄，你需要一個塔，不同的形狀和不同的數據可視化是適用於不同的數據集。

 

簡要說明如何訪問數據

好了，現在你已經添加了3個圓圈的DOM元素，你選擇了你的土地，挖了洞，種下了種子並且提供植物生長的結構。以下是如何選擇每個圓圈的屬性：

    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })

根據圓的規范，我們知道，可以通過SVG canvas 使用cx和cy來決定圓的位置，在上面的例子中，我們使用了function(d)去訪問一開始的數組里的每一個子項，直到我們使用了.enter()，這個代碼塊會根據數組中的每一個元素運行一次，總共運行了三次。

這個d參數代表了數組中的每一個元素，比如：{x: 100， y: 100}，如果參數的形式d，i，這個i就是數組的索引，當它是0的時候指的是數組中第一個元素，1時指的是第二個元素，以此類推。當你調用它時d.x，就是在查找每個元素的x屬性，並把相應的值變成像素，在我們的例子中，是距離右邊100個像素，現在你就是在使用平常所使用的Javascript！你可以使用if語句，調用function等等一些其他的。

結論

在你使用D3構建很酷的東西的時候，你需要理解你選擇的將數據轉換在DOM元素中的具體的方法，樣式相比數據是比較簡單的。添加文本跟添加形狀特別相似，一旦你理解的數據這部分，你也會理解文本。

盡管你可能會D3的創造者添加了這樣富有挑戰性的概念在早期的學習過程，但是他們有好的理由這么做。D3是一個靈活的庫，你可以接近自動的處理很多挑戰，這個數據綁定結構可以幫助你完成復雜的操作，僅需要一兩行代碼，現在就去驚艷你的用戶吧！