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>

效果圖

繫結資料--把資料繫結到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

效果圖

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()

效果圖

坐一個簡單的圖表

介紹一下畫布

html5畫布有兩種，svg和canvas

什麼是svg

svg是一種二維的可縮放的向量圖形，用xml格式定義的圖形，可直接放在html中使用

svg特點

• 向量圖形放大縮小不會失真
• 可對元素新增javascript事件處理
• 可在節點上直接修改屬性
• 不能用於遊戲開發

什麼是canvas

canvas通過js來畫2D的圖形

canvas特點

1.放大會失真
2.不支援js事件處理
3.能以.jpg .png格式儲存
4.適合遊戲開發

從上面的總結可以看出來這兩個畫布各有優缺點，當然其實echarts用的就是canvas，裡面模擬的有事件互動，用起來也是很不錯的

下節畫圖