vue2下载d3 并可全局通过d3使用,而不是this.$d3
时间: 2024-05-16 21:17:49 浏览: 124
首先,你需要在Vue项目中安装d3模块:
```
npm install d3 --save
```
然后,在main.js文件中引入并全局注册:
```javascript
import Vue from 'vue'
import * as d3 from 'd3'
// 将d3挂载到Vue原型上,这样就可以全局使用
Vue.prototype.$d3 = d3
```
现在,你就可以在Vue组件中通过 `$d3` 使用d3了,例如:
```javascript
export default {
mounted() {
const data = [1, 2, 3, 4, 5];
const svg = this.$d3.select('#chart')
.append('svg')
.attr('width', 200)
.attr('height', 200);
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', (d, i) => i * 40)
.attr('y', (d) => 200 - 10 * d)
.attr('width', 30)
.attr('height', (d) => d * 10)
.attr('fill', 'steelblue');
}
}
```
这样,你就可以全局使用d3了,而不需要每个组件中都引入和挂载d3。
阅读全文