D3.js可視化前端框架的使用要點(diǎn)

MASAILA 發(fā)布于2019-08-22 14:57 / 3474人閱讀

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

1.安裝

2.介紹

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

以上就是D3的選擇集。

以上選擇了數(shù)據(jù)，如何綁定數(shù)據(jù)

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

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

元素的選擇還可以通過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)       //設(shè)定寬度
    .attr("height", height);    //設(shè)定高度

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

先看線性比例尺代碼

  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,設(shè)定比例尺的定義域，range設(shè)定比例尺的值域。

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

看序數(shù)比例尺的代碼

 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

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

那么定義完比例尺了，怎么去應(yīng)用呢？

   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");

坐標(biāo)軸 axis

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

scale():指定比例尺

orient():指定刻度的朝向

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

   //數(shù)據(jù)
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);          //指定刻度的數(shù)量
     
     
     svg.append("g")
   .call(axis);

4 圖表的動畫

transition() // 啟動動畫

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

ease(bounce) // 動畫類型常用的有l(wèi)inear circle elastic bounce

5.圖表的交互

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

一般用on加事件處理程序

鼠標(biāo)常用的事件有：

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

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

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

6. 圖表的布局

布局是幫你完成了數(shù)據(jù)轉(zhuǎn)換，不是幫你完成了畫圖

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

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

具體看官網(wǎng)

7.理解update。enter exit

如果數(shù)組為 [3, 6, 9, 12, 15]，將此數(shù)組綁定到三個 p 元素的選擇集上?？梢韵胂?，會有兩個數(shù)據(jù)沒有元素與之對應(yīng)，這時候 D3 會建立兩個空的元素與數(shù)據(jù)對應(yīng)，這一部分就稱為 Enter。而有元素與數(shù)據(jù)對應(yīng)的部分稱為 Update。如果數(shù)組為 [3]，則會有兩個元素沒有數(shù)據(jù)綁定，那么沒有數(shù)據(jù)綁定的部分被稱為 Exit

GPU云服務(wù)器云服務(wù)器大數(shù)據(jù) 可視化 d3.js d3.js數(shù)據(jù)可視化實(shí)戰(zhàn) d3.js數(shù)據(jù)可視化實(shí)戰(zhàn)手冊 js和前端框架的優(yōu)勢

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93022.html

發(fā)表評論

登陸后可評論

0條評論

MASAILA

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2876·2023-04-25 20:02
C++vector

閱讀 1478·2021-11-11 16:55
Web自動化測試概念基礎(chǔ)

閱讀 652·2021-09-26 09:46
游戲服務(wù)器一般是什么列執(zhí)行的主機(jī)-方舟生存進(jìn)化專用服務(wù)器是什么？

閱讀 6257·2021-09-22 15:55
DesiVPS：$15/年/1GB內(nèi)存/15GB SSD空間/2TB流量/1Gbps端口/KVM/洛

閱讀 1853·2021-08-09 13:41
css項(xiàng)目中常用知識總結(jié)

閱讀 1600·2019-08-30 15:52
前端初學(xué)基礎(chǔ)知識 1

閱讀 2406·2019-08-30 14:13
關(guān)于echarts,數(shù)據(jù)使用setInterval定時刷新的問題

閱讀 3337·2019-08-26 13:48

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

D3.js可視化前端框架的使用要點(diǎn)

相關(guān)文章

**聲明式與響應(yīng)式——前端新一代數(shù)據(jù)可視化方案**

**14個最好的 JavaScript 數(shù)據(jù)可視化庫**

javascript功能插件大集合，寫前端的親們記得收藏

javascript功能插件大集合前端常用插件 js常用插件

javascript功能插件大集合前端常用插件 js常用插件

發(fā)表評論

0條評論

MASAILA

男|高級講師

TA的文章

tensorflow

C++vector

Web自動化測試概念基礎(chǔ)

游戲服務(wù)器一般是什么列執(zhí)行的主機(jī)-方舟生存進(jìn)化專用服務(wù)器是什么？

DesiVPS：$15/年/1GB內(nèi)存/15GB SSD空間/2TB流量/1Gbps端口/KVM/洛

css項(xiàng)目中常用知識總結(jié)

前端初學(xué)基礎(chǔ)知識 1

關(guān)于echarts,數(shù)據(jù)使用setInterval定時刷新的問題

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

D3.js可視化前端框架的使用要點(diǎn)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！