现在是数据时代，越来越多的人认识到数据的重要性，但是海量的数据并不能展现出它的价值，只有将数据分析、总结，才能够展现它的价值。所以有了数据分析和数据可视化。(个人小见解[•_•])
数据可视化有很多框架和库，看流行趋势和个人喜好。我学习的是D3.js。不多说了，进入正题......
1. 配置环境
进入官网，直接下载d3的压缩包，里面含有d3.js，直接引入即可。也可以直接使用联网的引用，如下所示：
<script src="https://d3js.org/d3.v5.min.js"></script>
还可以使用node.js作为后台，使用npm安装d3的库。具体实现方法自行百度即可。
2. D3.js之Hello World
Hello World 这句话可是编程界的基石，当之无愧的老大。实现这一步，你就离从入门到“放弃”不远了，不扯了。。。。
<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的增、删、查和数据绑定
-
- 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标签，id和class var p1=body.select("#p2") var p1_1=body.selectAll(".p1") - D3的两种查找
-
- D3的数据绑定
d3有两种数据方法data和datum
var p=d3.select("body").selectAll("p"); //为每一个P标签添加相同的字符"你好" var datas='你好'; p.datum(datas).text(function (d,i) { return "第"+i+"个元素"+d; }) //将列表每一个分别与P标签绑定 var dataset=[1,3,5] p.data(dataset) .text(function (d,i) { return "第"+i+"个元素"+d; }) //function(d,i)是d3的链式语法，经常用到，d代表数据，i是数据的index编号。 //通过 d 和 i 判定，为不同的数据显示不同的文字颜色 .style("color",function (d,i) { if (d>3) { return "red" } if (i==0) { return "yellow" } }) //.text()是文本，.style()是设置css样式 - D3的数据绑定
-
- D3的插入和删除
前面讲了d3的查找，必然就有添加和删除了
添加有两种append()和insert()，前一个是末尾添加，后一个是在之前添加；remove()是删除。
//在body里插入标签，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将数据和元素绑定时，会有三种情况：
（1）数据数量 = 元素数量 此时就是update
（2）数据数量 > 元素数量 此时就是enter
（3）数据数量 < 元素数量 此时就是exit
1）. update和enter
2）. update和exitvar dataset2=[1,3,5,7,9] //enter方法1 分步骤绑定数据 var update=p.data(dataset2); //先得到多余的数据量 var enter=update.enter(); //将update数据显示 update.text(function (d,i) { return "update:"+d+",index:"+i; }) //将p标签补全数量 var Enter=enter.append("p"); Enter.text(function (d,i) { return "enter:"+d+",index:"+i; }) //enter方法2 直接简便书写绑定数据 p.data(dataset2) .enter() .append("p") .text(function (d,i) { return "enter2:"+d+",index:"+i; })
一般情况是使用update和enter，毕竟数据量一般是巨大的，很少有足够数量的与之对应的元素。所以要熟练 enter 的使用方法。var dataset3=[1,3] // exit方法一 var update=p.data(dataset3); //得到多余的数据量 var exit=update.exit(); //先将update数据显示 update.text(function (d,i) { return "update:"+d+",index:"+i; }) //删除多余的p标签，应该直接删除，这里为了显示差别 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使用
