如何在vue中使用d3.js

Question

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

Answer 1

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

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

Answer 2

在 react 里用过 d3-shape，用 d3-shape 的 arc、symbol 等获取 path 的 d 数据，然后绑定到 SVG 中 path 的 d 属性上。

vue 里加图表的情况估计可以采用类似方法吧。

Answer 3

可以用vue指令。d3我没有做过，但是highcharts倒是写过。
或许可以帮助到你：
https://github.com/superman66...

Answer 4

先安装：npm install d3 --save-dev

在.vue文件中 import d3 from d3 就可以了

Answer 5

this.$el

Answer 6

我用 Vue + D3.js 做的一个案例
https://github.com/funlee/vue...

Answer 7

执行命令：
npm install d3 --save-dev
import * as d3 from 'd3'

Answer 8

我倒是没用d3插件，用的是原生获取dom节点，用svg原生语法创建节点，插入节点，倒也能实现，后边就犯难了！我页面手动创建的一个节点绑定了10个text标签，想用d3动态的展示数据！不知道如何下手！

Answer 9

https://forum.vuejs.org/t/vue...
把echarts挂载到window下，用window.echarts的方法可以在vue内部调用