安装
npm install d3 --save-dev
使用
在.vue组件里引用
import * as d3 from 'd3';
在我看来，d3在很大的程度上借鉴了jquery，尤其是关于选择器这一块，当然现在d3在数据图表展现方面完全是自己的一套东西，你可以把它看成是一个强大的javascript函数库，用来做数据可视化的。
d3强大体现在它的可定制性，你可以发挥你的想象，运用d3提供的基础api，做到你想要的图表
几个基础知识介绍
在做图之前我们先了解一下基础知识点
选择集(可以参考jquery选择器，用法基本一致)
d3.select() //是选择所有指定元素的第一个
d3.selectAll() //是选择指定元素的全部
举个例子
<div id="force">
<p id="p-one">我是page one</p>
<p class="commonP">我是page two</p>
<p class="commonP">我是page three</p>
</div>
<script>
//选择第一个p
d3.select("#force").select("#p-one").style("color","red")
//选择第二个p sellect一个class后，默认第一个
d3.select("#force").select(".commonP").style("color","blue")
//selectAll选择全部class节点
d3.select("#force").selectAll(".commonP").style("font-size","24px")
</script>
效果图
image.png
绑定数据--把数据绑定到dom节点上
datum() //绑定一个数据到选择集上
data() //绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
举个例子
<div>
<div id="force">
<p></p>
<p></p>
<p></p>
</div>
</div>
<script>
let strArr = ["apple","orange","banana"]
d3.select("body")
.selectAll("p")
.data(strArr)
.text(function (item,index) {
return index + "." + item
})
</script>
看上面的例子结合前面的知识点，我们选择body下面的p，然后绑定数组strArr到p上，这就是把数据绑定到节点上，然后遍历一下，item是绑定数组的值，index是数组的下标
如果strArr不是数组是一个字符串或者一个值，那么这个值会轮流与选中元素绑定，有兴趣的同学可以试一下，注意绑定一个值使用dataum
效果图
image.png
append,insert,remove
//append-- 在选择元素后插入元素
d3.select("#force").select("#p-one").append("p").text("我是append新增元素")
//insert-- 在选择元素前面插入元素
d3.select("#force").insert("p","#p-one").text("我是insert新增元素")
//删除元素
d3.select("#force").selectAll(".commonP").remove()
效果图
image.png
坐一个简单的图表
介绍一下画布
html5画布有两种，svg和canvas
什么是svg
svg是一种二维的可缩放的矢量图形，用xml格式定义的图形，可直接放在html中使用
svg特点
- 矢量图形放大缩小不会失真
- 可对元素添加javascript事件处理
- 可在节点上直接修改属性
- 不能用于游戏开发
什么是canvas
canvas通过js来画2D的图形
canvas特点
1.放大会失真
2.不支持js事件处理
3.能以.jpg .png格式保存
4.适合游戏开发
从上面的总结可以看出来这两个画布各有优缺点，当然其实echarts用的就是canvas，里面模拟的有事件交互，用起来也是很不错的
下节画图
网友评论