vue.js - 如何在vue中使用d3.js

问题描述

问 题

最近在用vue开发一个练习的页面，其中一个页面想用d3做一些图表。
但是，发现无从下手，
在.vue文件里，操作DOM是this.$refs.name;获取到DOM，然后进行操作
而d3，是使用d3.select('p').append('svg')...这样获取到DOM元素，然后操作。
那么，要怎样在vue中使用d3呢？有人试过吗？

解决方案

这里有两个例子，应该可以帮到你。他们分别从不同的方向着手，来解决这个问题。

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 。
如果或者觉得还需要进一步的了解，可能要修改或者增加其他关键词。希望对你有帮助吧。

这篇关于vue.js - 如何在vue中使用d3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！