【d3.js實踐教程01】d3基本操作

標籤：javaee   d3.js   freemarker   canvas   svg   

學習d3.js（以下都簡稱d3）也有一段時間了，運行d3做了幾個項目。我發現中文的d3教程很少，國外資料多但要求有一定的英文閱讀能力（推薦網址：http://bl.ocks.org/mbostock），於是就萌發了寫一個d3實際運用系列文章的想法，現在開始付之行動。在系列中，我會用d3+html5 canvas實現一些實際效果（如統計結果展示，地圖資料展示等），希望可以跟大家共同學習交流。

代碼我公布在git.cschina.com上，大家可以clone到本地運行，地址是：http://git.oschina.net/0604hx/d3lesson

運行環境是java 7+，tomcat 7.0.47+（以後會用到websocket，所以需要javaee7 跟 tomcat 7+的支援），IDE 是IntelliJ IDEA 13， 項目的視圖使用了freemarker。

這一章的範例程式碼主要介紹了d3.js的基本使用，如選擇元素，動態修改元素屬性、樣式，為元素添加動畫、滑鼠事件監聽。

樣本中包含了d3.js對html元素（div，p，span這些）的操作（增刪改），也包含了對svg元素（circle 圓，rect 矩形，line 線條等）的操作。

這裡重點說一下d3中的data函數，如下：

//建立一個長度為10的整形數組, 得到的是： [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]var data = d3.range(10);//然後可以利用這個數組，建立10個對應的div元素，數組中的每個對象對應一個div//這裡選取的是class=test的div（好跟其他的div區別開來），在一開始調用selectAll('div.test')得到的其實是一個空集合//接著調用data方法，就會根據傳入對象的長度，建立相應長度的集合（這時集合裡面元素都是空的，是給之後的div預留的空位置）//再接著調用enter()方法，就是進入具體的集合元素裡面，這時可以用append（）、insert（）這些方法建立html元素//建立好div後，就可以給這個div屬性賦值了//在這裡，我給div設定了class屬性，接著往div中加入了文字。可以看到每個div就對應了上一步建立的資料中的一個元素，可以使用資料元素的資料了d3.selectAll("div.test")    .data(data)    .enter()    .append("div")    .attr("class","test")    .html(function(d){        return d;    })    ;

將從git中匯出的項目部署到tomcat中，在瀏覽器可以看到如下首頁

中有3個頁面連結：

頁面1  使用d3操作div元素，點擊螢幕可以刷div的位置

頁面2  效果同上，只是將div元素換成了svg的rect

頁面3  介紹了d3對svg基本元素的操作，也包括data(),enter(),exit() 函數的使用

頁面3的如下

附上核心代碼：

/**     * 根據cmd命令在執行任務     */    function work(cmd){        cmd = cmd ||'';        //隨機畫一個圓形        if(cmd=='circle'){            var c = g.append("circle")                            .attr("class", "child")                            .attr("cx", random(width))                            .attr("cy", random(height))                            .attr("r", random(100) + 20)                            .attr("fill", colors(count))            ;            count ++;        }        else if(cmd=='rect'){            var w = random(100)+20;            var r = g.append("rect")                            .attr("class", "child")                            .attr("x", random(width))                            .attr("y", random(height))                            .attr("width", w)                            .attr('height', w)                            .attr("fill", colors(count))                    ;            count ++ ;        }        //隨機線條        else if(cmd=='line'){            var l= g.append("line")                            .attr("class", "child")                            .attr("x1", random(width))                            .attr("y1", random(height))                            .attr("x2", random(width))                            .attr("y2", random(height))                            .attr("stroke", colors(count))            ;            count ++;        }        //清除最近添加的元素        else if(cmd=='clear'){                lastest.attr("opacity", 1)                        .transition()                        .duration(duration)                        .attr("opacity", 0)                        .each("end", function(){                            d3.select(this)                                    .remove();                        })            ;        }        //清空全部的元素        else if(cmd=='clearAll'){            g.selectAll(".child")                    .attr("opacity", 1)                    .transition()                    .duration(duration)                    .delay(function(d,i){                        return 50*i;                    })                    .attr("opacity", 0)                    .each("end", function(){                        d3.select(this)                                .remove();                    })        }    }

完整代碼見：http://git.oschina.net/0604hx/d3lesson/blob/master/web/WEB-INF/templates/chapter01/svg2.ftl

【d3.js實踐教程01】d3基本操作