D3.js可視化前端框架的使用要點

MASAILA 發布于2019-08-22 14:57 / 3455人閱讀

摘要：該事件不會區分字母的大小寫，例如和被視為一致。這些布局的作用都是將某種數據轉換成另一種數據，而轉換后的數據是利于可視化的。而有元素與數據對應的部分稱為。

1.安裝

2.介紹

d3.select()和d3.selectAll();

以上就是D3的選擇集。

以上選擇了數據，如何綁定數據

提供2個方法：datum()和data().

datum():是指綁定一個數據到選擇集上。
data():綁定一個數組到選擇集上，并且數組的各項值與選擇集的各項綁定。

元素的選擇還可以通過id 和class去查找

   Pear
   Banana

var p = body.selectAll(".myclass");
p.style("color","red");

元素的插入

append() insert()

   body.append("p")
    .text("append p element");

刪除元素

  var p = body.select("#myid");
  p.remove();

3.畫圖表的要素

畫圖表之前都有一個前置工作要做，就是所有的東西都是畫在svg上的。

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

比例尺（scale）
比例尺分為2種，一種是線性比例尺，一種是序數比例尺

先看線性比例尺代碼

  var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
  var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scale.linear()
        .domain([min, max])
        .range([0, 300]);

linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

線性比例尺提供d3.scale.linear() 返回一個線性比例尺。其中domain,設定比例尺的定義域，range設定比例尺的值域。

其中 d3.min(數組名稱) d3.max(數組名稱) 分別是獲得數組的最小值和最大值。

看序數比例尺的代碼

 var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

var ordinal = d3.scale.ordinal()
        .domain(index)
        .range(color);

ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

序數比例尺提供的是ordinal方法。d3.scale.ordinal() ;

那么定義完比例尺了，怎么去應用呢？

   svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return linear(d);   //在這里用比例尺
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

坐標軸 axis

d3.svg.axis() 定義了一個坐標軸

scale():指定比例尺

orient():指定刻度的朝向

ticks():指定的刻度的數量

   //數據
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定義比例尺
var linear = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, 250]);

var axis = d3.svg.axis()
     .scale(linear)      //指定比例尺
     .orient("bottom")   //指定刻度的方向
     .ticks(7);          //指定刻度的數量
     
     
     svg.append("g")
   .call(axis);

4 圖表的動畫

transition() // 啟動動畫

duration(2000) //動畫的持續時間

ease(bounce) // 動畫類型常用的有linear circle elastic bounce

5.圖表的交互

circle.on("click", function(){
    //在這里添加交互內容
});

一般用on加事件處理程序

鼠標常用的事件有：

click：鼠標單擊某元素時，相當于 mousedown 和 mouseup 組合在一起。
mouseover：光標放在某元素上。
mouseout：光標從某元素上移出來時。
mousemove：鼠標被移動的時候。
mousedown：鼠標按鈕被按下。
mouseup：鼠標按鈕被松開。
dblclick：鼠標雙擊。
鍵盤常用的事件有三個：

keydown：當用戶按下任意鍵時觸發，按住不放會重復觸發此事件。該事件不會區分字母的大小寫，例如“A”和“a”被視為一致。
keypress：當用戶按下字符鍵（大小寫字母、數字、加號、等號、回車等）時觸發，按住不放會重復觸發此事件。該事件區分字母的大小寫。
keyup：當用戶釋放鍵時觸發，不區分字母的大小寫。觸屏常用的事件有三個：

touchstart：當觸摸點被放在觸摸屏上時。
touchmove：當觸摸點在觸摸屏上移動時。
touchend：當觸摸點從觸摸屏上拿開時。當某個事件被監聽到時，D3 會把當前的事件存到 d3.event 對象，里面保存了當前事件的各種參數，請大家好好參詳。如果需要監聽到事件后立刻輸出該事件，可以添加一行代碼：

6. 圖表的布局

布局是幫你完成了數據轉換，不是幫你完成了畫圖

D3 總共提供了 12 個布局：餅狀圖（Pie）、力導向圖（Force）、弦圖（Chord）、樹狀圖（Tree）、集群圖（Cluster）、捆圖（Bundle）、打包圖（Pack）、直方圖（Histogram）、分區圖（Partition）、堆棧圖（Stack）、矩陣樹圖（Treemap）、層級圖（Hierarchy）。

12 個布局中，層級圖（Hierarchy）不能直接使用。集群圖、打包圖、分區圖、樹狀圖、矩陣樹圖是由層級圖擴展來的。如此一來，能夠使用的布局是 11 個（有 5 個是由層級圖擴展而來）。這些布局的作用都是將某種數據轉換成另一種數據，而轉換后的數據是利于可視化的。

具體看官網

7.理解update。enter exit

如果數組為 [3, 6, 9, 12, 15]，將此數組綁定到三個 p 元素的選擇集上。可以想象，會有兩個數據沒有元素與之對應，這時候 D3 會建立兩個空的元素與數據對應，這一部分就稱為 Enter。而有元素與數據對應的部分稱為 Update。如果數組為 [3]，則會有兩個元素沒有數據綁定，那么沒有數據綁定的部分被稱為 Exit

GPU云服務器云服務器大數據可視化 d3.js d3.js數據可視化實戰 d3.js數據可視化實戰手冊 js和前端框架的優勢

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93022.html

聲明式與響應式——前端新一代數據可視化方案

摘要：數據可視化圖表圖表作為數據可視化最常見的表現形式之一，往往被以偏概全的認為圖表就是數據可視化。嚴格來說，數據可視化應該是連接數據與視覺的一個映射關系，將數據映射成人更容易感知其規律的可視化結果。題目中的新一代是個相對的概念，事實上本文即將介紹的方法已經有了生產環境可用的實現方案（這也側面佐證了其可行性），但考慮到此方法與現在大部分前端項目中所使用的數據可視化方案相比仍有一些優勢，因此...

xuhong 2019-08-20 12:34 評論0 收藏0
14個最好的 JavaScript 數據可視化庫

摘要：適用于，演示這是開發的一個簡單的可視化庫，它允許你創建所有常用的圖表類型條形圖，樹形圖，折線圖，面積圖等。可以輕松地對折線圖和條形圖進行混合和匹配以組合不同的數據集，這是非常棒的功能。翻譯：瘋狂的技術宅原文：https://www.monterail.com/blo... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章你的程序有多...

Mertens 2019-08-23 16:23 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評論0 收藏0