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

一個初學者的指南，使用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是一個靈活的庫，你能夠接近自動的處理不少挑戰，這個數據綁定結構能夠幫助你完成複雜的操做，僅須要一兩行代碼，如今就去驚豔你的用戶吧！