現(xiàn)在是數(shù)據(jù)時代缔莲，越來越多的人認(rèn)識到數(shù)據(jù)的重要性哥纫，但是海量的數(shù)據(jù)并不能展現(xiàn)出它的價值，只有將數(shù)據(jù)分析痴奏、總結(jié)蛀骇，才能夠展現(xiàn)它的價值厌秒。所以有了數(shù)據(jù)分析和數(shù)據(jù)可視化。(個人小見解[?_?])
數(shù)據(jù)可視化有很多框架和庫擅憔，看流行趨勢和個人喜好鸵闪。我學(xué)習(xí)的是D3.js。不多說了暑诸，進(jìn)入正題......
1. 配置環(huán)境
進(jìn)入官網(wǎng)蚌讼，直接下載d3的壓縮包，里面含有d3.js个榕，直接引入即可篡石。也可以直接使用聯(lián)網(wǎng)的引用，如下所示：
<script src="https://d3js.org/d3.v5.min.js"></script>
還可以使用node.js作為后臺西采，使用npm安裝d3的庫凰萨。具體實現(xiàn)方法自行百度即可。
2. D3.js之Hello World
Hello World 這句話可是編程界的基石械馆，當(dāng)之無愧的老大沟蔑。實現(xiàn)這一步，你就離從入門到“放棄”不遠(yuǎn)了狱杰，不扯了。厅须。仿畸。。
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<p></p>
</body>
<script>
var body = d3.select("body");
body.select("p).text("Hello World!")
</script>
</html>
3. D3.js的增朗和、刪错沽、查和數(shù)據(jù)綁定
-
- D3的兩種查找
d3有兩種查找方法：select和selectAll
<p class="p1">Hello World 1</p> <p class="p1">Hello World 2</p> <p id="p2">Hello World 3</p> //select查找一個，selectAll查找得到一個列表 //查找可以通過HTML標(biāo)簽眶拉，id和class var p1=body.select("#p2") var p1_1=body.selectAll(".p1") - D3的兩種查找
-
- D3的數(shù)據(jù)綁定
d3有兩種數(shù)據(jù)方法data和datum
var p=d3.select("body").selectAll("p"); //為每一個P標(biāo)簽添加相同的字符"你好" var datas='你好'; p.datum(datas).text(function (d,i) { return "第"+i+"個元素"+d; }) //將列表每一個分別與P標(biāo)簽綁定 var dataset=[1,3,5] p.data(dataset) .text(function (d,i) { return "第"+i+"個元素"+d; }) //function(d,i)是d3的鏈?zhǔn)秸Z法千埃，經(jīng)常用到，d代表數(shù)據(jù)忆植，i是數(shù)據(jù)的index編號放可。 //通過 d 和 i 判定，為不同的數(shù)據(jù)顯示不同的文字顏色 .style("color",function (d,i) { if (d>3) { return "red" } if (i==0) { return "yellow" } }) //.text()是文本朝刊，.style()是設(shè)置css樣式 - D3的數(shù)據(jù)綁定
-
- D3的插入和刪除
前面講了d3的查找耀里，必然就有添加和刪除了
添加有兩種append()和insert()，前一個是末尾添加拾氓，后一個是在之前添加冯挎；remove()是刪除。
//在body里插入標(biāo)簽咙鞍，insert需要指定放在誰的前面房官，否則排在最后趾徽。 var body = d3.select("body"); body.append("p").text("append"); body.insert("p","#p2").text("insert"); //刪除 body.select("#p").remove() - D3的插入和刪除
-
- D3的update、enter翰守、exit使用
在使用D3的data將數(shù)據(jù)和元素綁定時孵奶，會有三種情況：
（1）數(shù)據(jù)數(shù)量 = 元素數(shù)量 此時就是update
（2）數(shù)據(jù)數(shù)量 > 元素數(shù)量 此時就是enter
（3）數(shù)據(jù)數(shù)量 < 元素數(shù)量 此時就是exit
1）. update和enter
2）. update和exitvar dataset2=[1,3,5,7,9] //enter方法1 分步驟綁定數(shù)據(jù) var update=p.data(dataset2); //先得到多余的數(shù)據(jù)量 var enter=update.enter(); //將update數(shù)據(jù)顯示 update.text(function (d,i) { return "update:"+d+",index:"+i; }) //將p標(biāo)簽補(bǔ)全數(shù)量 var Enter=enter.append("p"); Enter.text(function (d,i) { return "enter:"+d+",index:"+i; }) //enter方法2 直接簡便書寫綁定數(shù)據(jù) p.data(dataset2) .enter() .append("p") .text(function (d,i) { return "enter2:"+d+",index:"+i; })
一般情況是使用update和enter拒课，畢竟數(shù)據(jù)量一般是巨大的，很少有足夠數(shù)量的與之對應(yīng)的元素事示。所以要熟練 enter 的使用方法早像。var dataset3=[1,3] // exit方法一 var update=p.data(dataset3); //得到多余的數(shù)據(jù)量 var exit=update.exit(); //先將update數(shù)據(jù)顯示 update.text(function (d,i) { return "update:"+d+",index:"+i; }) //刪除多余的p標(biāo)簽，應(yīng)該直接刪除潦俺，這里為了顯示差別 exit.text(function (d,i) { return "exit" }) // exit.remove() //直接刪除 // exit方法2 p.data(dataset3) .text(function (d,i) { return "exit2:"+d+",index:"+i; }) .exit() .remove() - D3的update、enter翰守、exit使用
