vue引入d3

 單頁面使用

cnpm install d3 --save-dev

 

指定版本安裝

cnpm install d3@6.3.1 -S

<script>
  import * as d3 from 'd3'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    testD3(){
      let test1 = d3.select("#test1").text();
      alert(test1)
    }
  }
}
</script>

 

<el-button type="primary" @click="testD3()">主要按鈕</el-button>

使用yarn install d3安裝后，idea提示找不到d3.select方法，但實際上方法可以運行生效，改為cnpm install d3 --save-dev重新安裝了一次，不再有此提示了

 

全局使用

上面的方式需要在使用的vue視圖中引入d3，頁面多就得多次引用，可以使用全局的方式，將d3注冊到Vue原型中

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)  // 引入Element

import * as d3 from 'd3'
Vue.prototype.$d3 = d3


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

重點是下面兩行

import * as d3 from 'd3'
Vue.prototype.$d3 = d3

 

vue視圖中使用，以$開頭表示這是一個第三方插件變量，以區別於內部本身的變量，類似於jQuery的$

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    testD3(){
      let a = this.$d3.select("#infoBtn").text();
      alert(a);
    }
  }
}
</script>

 

注意事項

d3中展示圖形時，有自己的樣式；

vue中可以使用scss，這兩者可能會有沖突

解決方案：使用d3的視圖中盡量避免使用scss