D3.js的V5版本-Vue框架中使用(第三章) ---比例尺和坐标轴

原创

于 2018-06-16 17:01:00 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

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

本文介绍了D3.js V5版本在Vue框架中的应用，重点讲解了四种比例尺类型：线性、序数、序数段和时间比例尺，包括d3.scaleLinear(), d3.scaleOrdinal(), d3.scaleBand()和d3.scaleTime()的用法。此外，还讨论了坐标轴的创建，如d3.axisBottom(), d3.axisLeft(), d3.axisRight()和d3.axisTop()，并提供了在Vue项目中的实际应用示例。" 130915017,10794535,Java实现字符串通配符匹配算法详解,"['Java', '算法', '面试', '开发语言']

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

一. 比例尺

此处记录常用的四种常用比例尺：线性、序数、序数段、时间比例尺，其它稍后更新或者自行官网查看

d3.scaleLinear()
d3.scaleOrdinal()
d3.scaleBand()
d3.scaleTime()

二. 坐标轴

api: axisBottom\Left\Right\Top等

使用：d3.axisBottom(scale); scale比例尺

三. vue使用

<template lang='pug'>
    div.scale-pane(:id="id")
        svg
</template>
<script>
/**
 * 比例尺
 */
import * as d3 from 'd3'
export default {
    name: 'Scale',
    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.