D3.js系列——元素操做和簡單畫布操做

1、元素操做:

一、選擇元素

  select 和 selectAll,以及選擇集的概念html

var p = d3.select("body").select("p")     // 使用 select ,參數傳入 p 便可,如此返回的是第一個 p 元素
var p = d3.select("body").selectAll("p")  // 使用 selectAll 選擇 body 中全部的 p 元素
var p = d3.select("body").select("#myId") // 使用 select 選擇id元素
var p = d3.select("body").selectAll(".myClass") // 要用 selectAll 選擇class元素

  關於 select 和 selectAll 的參數,實際上是符合 CSS 選擇器的條件的,即用「井號(#)」表示 id,用「點(.)」表示 class。數組

  此外,對於已經綁定了數據的選擇集,還有一種選擇元素的方法,那就是靈活運用 function(d, i)。咱們已經知道參數 i 是表明索引號的,因而即可以用條件斷定語句來指定執行的元素。瀏覽器

二、插入元素

  插入元素涉及的函數有兩個:app

  append():在選擇集末尾插入元素svg

  insert():在選擇集前面插入元素函數

var body = d3.select("body"); body.append("p") .text("append p element");//在 body 的末尾添加一個 p 元素
 body.insert("p","#myId") .text("insert p element");//在 body 中 id 爲 myid 的元素前添加一個 p 元素

三、刪除元素

  刪除一個元素時,對於選擇的元素,使用 remove 便可spa

var body = d3.select("body"); var p = body.select("#myid"); p.remove(); //刪除指定 id 的段落元素

2、畫布是什麼

  以前的處理對象都是 HTML 的文字,沒有涉及圖形的製做。要繪圖,首要須要的是一塊繪圖的「畫布」。code

  HTML 5 提供兩種強有力的「畫布」:SVG 和 Canvas。htm

一、SVG 是什麼

  SVG,指可縮放矢量圖形(Scalable Vector Graphics),是用於描述二維矢量圖形的一種圖形格式,是由萬維網聯盟制定的開放標準。對象

  SVG 使用 XML 格式來定義圖形,除了 IE8 以前的版本外,絕大部分瀏覽器都支持 SVG,可將 SVG 文本直接嵌入 HTML 中顯示。

  SVG 有以下特色:

  (1)SVG 繪製的是矢量圖,所以對圖像進行放大不會失真。

  (2)基於 XML,能夠爲每一個元素添加 JavaScript 事件處理器。

  (3)每一個圖形均視爲對象,更改對象的屬性,圖形也會改變。

  (4)不適合遊戲應用。

二、Canvas 是什麼

  Canvas 是經過 JavaScript 來繪製 2D 圖形,是 HTML 5 中新增的元素。

  Canvas 有以下特色:

  (1)繪製的是位圖,圖像放大後會失真。

  (2)不支持事件處理器。

  (3)可以以 .png 或 .jpg 格式保存圖像

  (4)適合遊戲應用

三、添加畫布

  D3 雖然沒有明文規定必定要在 SVG 中繪圖,可是 D3 提供了衆多的 SVG 圖形的生成器,它們都是隻支持 SVG 的。所以,建議使用 SVG 畫布

  使用 D3 在 body 元素中添加 svg 的代碼以下:

var width = 300;  //畫布的寬度
var height = 300;   //畫布的高度
 
var svg = d3.select("body")     //選擇文檔中的body元素
    .append("svg")          //添加一個svg元素
    .attr("width", width)       //設定寬度
    .attr("height", height);    //設定高度

  有了畫布,接下來就能夠在畫布上做圖了。

四、繪製矩形

  這裏繪製一個橫向的柱形圖。只繪製矩形,不繪製文字和座標軸。在 SVG 中,矩形的元素標籤是 rect。例如:

<svg>
<rect></rect>
<rect></rect>
</svg>

  上面的 rect 裏沒有矩形的屬性。矩形的屬性,經常使用的有四個:

  x:矩形左上角的 x 座標

  y:矩形左上角的 y 座標

  width:矩形的寬度

  height:矩形的高度

  要注意,在 SVG 中,x 軸的正方向是水平向右,y 軸的正方向是垂直向下的。

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>簡單矩形</title> 
</head> 
<body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script>
    var width = 300;  //畫布的寬度
    var height = 300;   //畫布的高度
 
    var svg = d3.select("body")     //選擇文檔中的body元素
        .append("svg")          //添加一個svg元素
        .attr("width", width)       //設定寬度
        .attr("height", height);    //設定高度

    var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //數據(表示矩形的寬度)
    var rectHeight = 25;   //每一個矩形所佔的像素高度(包括空白)
 svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x",20) .attr("y",function(d,i){ return i * rectHeight; }) .attr("width",function(d){ return d; }) .attr("height",rectHeight-2) .attr("fill","steelblue"); </script> 
</body> 
</html>

  這段代碼添加了與 dataset 數組的長度相同數量的矩形,所使用的語句是:

svg.selectAll("rect")   //選擇svg內全部的矩形
    .data(dataset)  //綁定數組
    .enter()        //指定選擇集的enter部分
    .append("rect") //添加足夠數量的矩形元素

  這段代碼之後會經常出如今 D3 的代碼中,請務必牢記。當:有數據,而沒有足夠圖形元素的時候,使用此方法能夠添加足夠的元素。

  添加了元素以後,就須要分別給各元素的屬性賦值。在這裏用到了 function(d, i),前面已經講過,d 表明與當前元素綁定的數據,i 表明索引號。給屬性賦值的時候,是須要用到被綁定的數據,以及索引號的。

  最後一行的:.attr("fill","steelblue"); 是給矩形元素設置顏色。通常來講,最好寫成外置 CSS 的形式,方便歸類和修改。

相關文章
相關標籤/搜索