之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js
最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用
首先安装
以防万一,然后看package.json
安装完成
在我们开始之前，让我们渲染一个Vue组件，它使用常规的D3 DOM操作呈现一个简单的折线图：
import * as d3 from 'd3';
const data = [99,71,78,25,36,92];
export default {
name: 'non-vue-line-chart',template: '',mounted() {
const svg = d3.select(this.$el)
.append('svg')
.attr('width',500)
.attr('height',270)
.append('g')
.attr('transform','translate(0,10)');
const x = d3.scaleLinear().range([0,430]);
const y = d3.scaleLinear().range([210,0]);
d3.axisLeft().scale(x);
d3.axisTop().scale(y);
x.domain(d3.extent(data,(d,i) => i));
y.domain([0,d3.max(data,d => d)]);
const createPath = d3.line()
.x((d,i) => x(i))
.y(d => y(d));
svg.append('path').attr('d',createPath(data));
},};
非常酷，即使它没有公开任何属性并且数据是硬编码的，它很好地将视图从逻辑中分离出来，并且使用Vue钩子，方法和data对象,现象和上图一样的。
总结
以上所述是小编给大家介绍的在Vue项目中使用d3.js的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
原文链接：/vue/32564.html