如何在vue中使用d3.js
最近在用vue开发一个练习的页面，其中一个页面想用d3做一些图表。
但是，发现无从下手，
在.vue文件里，操作DOM是this.$refs.name;获取到DOM，然后进行操作
而d3，是使用d3.select('p').append('svg')...这样获取到DOM元素，然后操作。
那么，要怎样在vue中使用d3呢？有人试过吗？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
这里有两个例子，应该可以帮到你。他们分别从不同的方向着手，来解决这个问题。
vue作为主导：
Composing D3 Visualizations With Vue.js
https://tyronetudehope.com/20...
文章中直接搜索关键字：VueLineChart.vue ，可以直达vue + d3 的部分。
作者也有给出源码。
d3作为主导：
D3 with Vue's Reactivity
https://jsfiddle.net/chrisvfr...
另外还有人写了个插件： https://github.com/jaredreich...
由于我自己没有vue + d3的经验，所以上面这些都是google回来的。关键词是 vue with d3 。
如果或者觉得还需要进一步的了解，可能要修改或者增加其他关键词。希望对你有帮助吧。
在 react 里用过 d3-shape，用 d3-shape 的 arc、symbol 等获取 path 的 d 数据，然后绑定到 SVG 中 path 的 d 属性上。
vue 里加图表的情况估计可以采用类似方法吧。
可以用vue指令。d3我没有做过，但是highcharts倒是写过。
或许可以帮助到你：
https://github.com/superman66...
先安装：npm install d3 --save-dev
在.vue文件中 import d3 from d3 就可以了
this.$el
我用 Vue + D3.js 做的一个案例
https://github.com/funlee/vue...
执行命令：
npm install d3 --save-dev
import * as d3 from 'd3'
我倒是没用d3插件，用的是原生获取dom节点，用svg原生语法创建节点，插入节点，倒也能实现，后边就犯难了！我页面手动创建的一个节点绑定了10个text标签，想用d3动态的展示数据！不知道如何下手！
https://forum.vuejs.org/t/vue...
把echarts挂载到window下，用window.echarts的方法可以在vue内部调用