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

最新推荐文章于 2022-02-23 15:52:55 发布

空谷足音 -จุ

最新推荐文章于 2022-02-23 15:52:55 发布

阅读量906

点赞数 2

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

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

版权

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

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

<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 =