vue2下载d3 并可全局通过d3使用,而不是$d3或者this.$d3
时间: 2023-12-31 16:04:20 浏览: 27
要在 Vue2 中全局使用 D3,可以将其作为一个全局变量引入。具体做法是在 Vue 项目的 index.html 文件中通过 script 标签引入 D3 库,并将其挂载到 window 对象上。例如:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<!-- 这里引入 D3 库 -->
<script src="https://d3js.org/d3.v6.min.js"></script>
<!-- 在这里将 D3 挂载到 window 对象上 -->
<script>
window.d3 = d3;
</script>
<script src="/dist/build.js"></script>
</body>
</html>
```
然后在 Vue 组件中就可以直接使用全局变量 d3,而不需要使用 $d3 或者 this.$d3。例如:
```javascript
export default {
name: 'MyComponent',
mounted() {
const svg = d3.select('#my-svg')
.append('circle')
.attr('cx', 50)
.attr('cy', 50)
.attr('r', 25);
},
};
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)