一、新建一個vue專案，安裝d3.js

這個網上資源都有，就不寫詳細了，自己搜吧。

二、vue、d3的第一個demo

瞭解大d3和javascript修改p標籤內容的不同用法。

<template>
  <div>
    <p>hello world1</p>
    <p>hello world2</p>
  </div>
</template>
<script>
import * as d3 from "d3";
export default {
  mounted(){
    this.getlist();
  },
  methods:{
    getlist(){
      //通過javascript來改變p標籤的值
      // let p = document.getElementsByTagName("p");
      // for (let i = 0; i < p.length; i++) {
      //   p[i].innerHTML = 'I like '
      // }

      //通過d3來改變
      let p = d3.select("body").selectAll("p").text("like me");
      p.style("color","red")
        .style("font-size","30px");
    },
  },
};
</script>
<style lang="sass" scoped>

</style>
 

當然這是一個簡單的例項，只是用來了解一下d3在vue中的使用。其實在官網上的API有d3的各種方法，它就相當於把javascript給封裝了一樣，簡化了我們寫javascript的程式碼。當然其最主要的還是資料的視覺化。自己也是剛接觸，理解可能有誤差，觀看文件的朋友就當參考即可。

三、第二個demo

通過datum和data來改變p標籤中的內容

<template>
  <div>
    <p>mary</p>
    <p>joni</p>
    <p>henry</p>
  </div>
</template>
<script>
import * as d3 from "d3";
export default {
  mounted(){
    this.getlist();
  },
  methods:{
    getlist(){
//datum()
      let str = "bier";
      let body = d3.select("body");
      let p = body.selectAll("p");
      p.datum(str);
      // p.text(function(d,i){
      //   return "第" + i + "個元素繫結的資料是" + d;
      // });
//data()
      let datas = ['I like','like me','like you'];
      p.data(datas).text(function(d,i){
        return d;
      })

    },
  },
};
</script>
<style lang="sass" scoped>

</style>
 

四、第三個demo

選擇元素，插入元素、刪除元素

<template>
  <div id="mydiv">
    <p class="myclass">mary</p>
    <p id="myid">joni</p>
    <p class="myclass">henry</p>
  </div>
</template>
<script>
import * as d3 from "d3";
export default {
  mounted(){
    this.getlist();
  },
  methods:{
    getlist(){
      let body = d3.select("body");
      let p1 = body.select("p");
      // p1.style("color","red");//選擇第一個p標籤
      body.select("#myid").style("color","blue");//選擇id為myid的p標籤
      body.selectAll(".myclass").style("color","red");//選擇所有類名為myclass的標籤
      body.append("p").text("I like");//在body的末尾新增一個p元素
      body.insert("p",'div').text("like me");//在div元素前新增一個p元素
      // let p = body.select("#myid");
      // p.remove();//刪除指定id為myid的元素

    },
  },
};
</script>
<style lang="sass" scoped>

</style>