D3.js的V5版本-Vue框架中使用(第五章) ---让图表动起来

空谷足音 -จุ

于 2018-06-16 17:13:33 发布

阅读量1.7k

点赞数 3

分类专栏： d3 文章标签： d3-v5-vue d3 d3-vue d3-v5 d3 vue

本文链接：https://blog.csdn.net/davidPan1234/article/details/80714010

版权

本文详细介绍了如何在Vue框架中利用D3.js V5版本创建动态图表，通过API讲解和实际应用，展示如何使图表动起来。

摘要由CSDN通过智能技术生成

一. api讲解

 
   * .attr(xxx) .transition() .attr(xxx)，transition()表示添加过渡，也就是从前一个属性过渡到后一个属性 
 
   * .duration(2000)，表示过渡时间持续2秒 
 
   * .delay(500)，表示延迟0.4秒后再进行过渡 
 
   * .ease(d3.easeElasticInOut)表示过渡方式，注意这里和v3版本的区别

二. vue使用

<template lang='pug'>
    div.histogram-pane(:id="id")
        svg 
</template>

<script>
/**
 * 含有动画的图表
 */
import * as d3 from 'd3'
export default {
    name: '',
    data () {
        return {
            id: ''
        }
    },
    methods: {