第一章——vue、d3进阶

一、新建一个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>

学习d3的网站：http://www.ourd3js.com/

第一章——vue、d3进阶

猜你喜欢