D3.js的V5版本-Vue框架中使用(第四章) ---简单的图表使用

原创

于 2018-06-15 13:40:55 发布 · 953 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#D3-v5-vue #d3-vue #d3-v5 #d3 vue

本文主要介绍了如何在Vue项目中集成并使用D3.js的V5版本来创建基础图表。通过实例展示了D3.js的强大功能，包括数据绑定、元素的进入、更新和退出等概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<script>
import * as d3 from 'd3'
export default {
    name: '',
    data () {
        return {
            id: ''
        }
    },
    methods: {
        uuid () {
            function s4 () {
                return Math.floor((1 + Math.random()) * 0x10000)
                    .toString(16)
                    .substring(1)
            }
            return (
                s4() + s4() + '-' + s4() + '-' + s4() +  '-' + s4() + '-' + s4() + s4() + s4()
            )
        },
    },
    created () {
        this.id = this.uuid()
    },
    mounted () {
        //1.创建svg画布
        let marge = { top: 60, bottom: 60, left: 60, right: 60 }
        // let width = document.getElementById(this.id).clientWidth
        // let height = document.getElementById(this.id).clientHeight
        let width = 600
        let height = 400
        const svg = d3.select(this.$el).select(