vue + d3系列 -- 初始篇

安装

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，里面模拟的有事件交互，用起来也是很不错的

下节画图