[Java教程]一個(gè)初學(xué)者的指南，使用D3做數(shù)據(jù)綁定

0 2016-07-03 13:00:09

一個(gè)初學(xué)者的指南，使用D3做數(shù)據(jù)綁定

D3.js 是個(gè)強(qiáng)大的數(shù)據(jù)可視化庫(kù)，可以做出驚艷的圖表。比如：氣泡圖，線圖和條形圖－－只需要很少行的代碼

隨著初學(xué)者對(duì)JavaScript的理解，可以將數(shù)組或者對(duì)象轉(zhuǎn)換成一個(gè)五彩繽紛的顯示效果。然而，每一個(gè)初學(xué)者的比較糾結(jié)的是一開始理解如何將數(shù)據(jù)綁定在實(shí)際的DOM元素上。這就是我們所知道的“數(shù)據(jù)綁定”或者叫“數(shù)據(jù)連接”。這是一個(gè)重要的處理，因?yàn)檫@個(gè)整個(gè)過程的第一步！

非常直觀的，你可能希望使用一個(gè) for() 循環(huán)，循環(huán)每一項(xiàng)數(shù)據(jù)并且創(chuàng)建一個(gè)元素，像這樣：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); }

但是，這并沒有說如何讓它工作，事實(shí)上，這里沒有for()循環(huán)，下面的這個(gè)代碼塊將覆蓋上面的功能：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);

這段代碼會(huì)添加3個(gè)黑色的圓圈到你的SVG cancas,哇，這是因?yàn)镈3使用了聲明式編程，for()循環(huán)隱含在這個(gè)代碼塊里。

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

如果你想找一些關(guān)于這個(gè)概念更多的技術(shù)說明，可以去看D3文檔或者Scott Murray的guide to binding

第一步：svg/地塊

首先，你需要選擇一個(gè)地方來畫你的可視化試圖。這就相當(dāng)于你想找一塊地方來種植。var svg=d3.select("body") .append("svg") .attr("weight",'800px') .attr("height",'800px');

你創(chuàng)建了一個(gè)800px ＊ 800px的地塊--這個(gè)"body"--一個(gè)你可以加入元素的地方。相當(dāng)簡(jiǎn)單。

第二步：selectAll/挖洞

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

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

這張圖不是很準(zhǔn)確，因?yàn)槟愕幕▓@里可以有無數(shù)個(gè)洞。沒有什么好的方式使用一張圖合理的說明這塊空地的數(shù)量。最重要的是你規(guī)劃一塊區(qū)域，放入你的數(shù)據(jù)元素。如果你想加入SVG“矩形”元素。你會(huì)在你花園的另外一部分添加。在代碼里的這一點(diǎn)，你并不清楚你會(huì)添加多少元素。下面就讓我們來弄清楚這個(gè)。

第三步：Data/種子

這是最重要的一部分。它決定了你將用于可視化的數(shù)據(jù)。在JavaScript里，你可以通過數(shù)組或者對(duì)象傳遞數(shù)據(jù)，在這一步，你"綁定"你的數(shù)據(jù)在DOM元素上，DOM元素的類型是你在selectAll()中所指定的。你可以像平時(shí)在JavaScript的方式引用數(shù)組或者對(duì)象的子項(xiàng)。在這個(gè)例子里，這里有三個(gè)子項(xiàng)在數(shù)組中，當(dāng)我們寫完如下代碼，所以我們希望有三個(gè)DOM元素被添加:var data = [{x: 100,y: 100},{x: 200,y: 200},{x: 300,y: 300}] svg.selectAll("circle") .data(data)

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

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

.enter() 方法匹配selectAll語句中數(shù)組或者對(duì)象的子項(xiàng)數(shù)量，并且決定了你需要?jiǎng)?chuàng)建的元素的數(shù)量。你不再擁有一個(gè)無限土地。洞的數(shù)量現(xiàn)在匹配你想要種的植物的數(shù)量：svg.selectAll("circle") .data(data) .enter()

在這個(gè)例子的代碼中，有三個(gè)坑，種子是一種特定的類型(比如：土豆)，這也決定了你的代碼會(huì)自動(dòng)迭代的次數(shù)(3次)

第五步：Append/植物的結(jié)構(gòu)

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

這跟你植物的結(jié)構(gòu)很相似，你想要你的植物長(zhǎng)成什么樣子？如果你想長(zhǎng)成番茄，你需要一個(gè)塔，不同的形狀和不同的數(shù)據(jù)可視化是適用于不同的數(shù)據(jù)集。

簡(jiǎn)要說明如何訪問數(shù)據(jù)

好了，現(xiàn)在你已經(jīng)添加了3個(gè)圓圈的DOM元素，你選擇了你的土地，挖了洞，種下了種子并且提供植物生長(zhǎng)的結(jié)構(gòu)。以下是如何選擇每個(gè)圓圈的屬性：.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; })

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

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

結(jié)論

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

盡管你可能會(huì)D3的創(chuàng)造者添加了這樣富有挑戰(zhàn)性的概念在早期的學(xué)習(xí)過程，但是他們有好的理由這么做。D3是一個(gè)靈活的庫(kù)，你可以接近自動(dòng)的處理很多挑戰(zhàn)，這個(gè)數(shù)據(jù)綁定結(jié)構(gòu)可以幫助你完成復(fù)雜的操作，僅需要一兩行代碼，現(xiàn)在就去驚艷你的用戶吧！

本文網(wǎng)址：http://www.shaoqun.com/a/235604.html

*特別聲明：以上內(nèi)容來自于網(wǎng)絡(luò)收集，著作權(quán)屬原作者所有，如有侵權(quán)，請(qǐng)聯(lián)系我們：admin@shaoqun.com。

0

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的java使用d3_[Java教程]一个初学者的指南，使用D3做数据绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。