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

時間 2019-11-12

原文原文鏈接

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 的形式，方便歸類和修改。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。