D3超简单入门教程（一）——简单条形图

L_九棵树

于 2019-07-14 16:12:40 发布

阅读量3.4k

点赞数 2

分类专栏：前端文章标签： D3.js 数据可视化

本文链接：https://blog.youkuaiyun.com/m0_38044941/article/details/95892826

版权

本文是一篇关于如何使用D3.js创建条形图的简易教程，特别适合非专业前端开发者。文章首先展示了D3.js的基本用法，通过一个简单的'Hello world'例子引入。随后，详细解释了如何用D3.js绘制条形图，包括定义范围、数据缩放、图形绘制和添加文字等步骤。示例代码清晰地展示了在Vue组件中使用D3.js的过程。

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

1、简介

本文是介绍怎么用简单的方法利用D3.js画出条形图，为了方便操作，本文选取的是vue组件。先放上最简单的代码：

<template>
  
</template>

<script>
import * as d3 from 'd3'

export default {
  name: 'demo001',
  data () {
    return {
      dataSet: [ 1, 2, 3, 4, 5 ]
    }
  },
  methods: {
    testD3001 () {
      d3.select('body')
        .select('p')
        .data(this.dataSet)
        .enter()
        .append('p')
        .text('Hello world!')
    }
  },
  mounted () {
    this.testD3001()
  }

}
</script>

<style scoped>

</style>

上边的代码做了两个事情，首先在html页面中添加了一个<p>标签，然后在js中调用d3相关代码，获取到html中的对象，然后为其添加了“Hello world”的文字。效果如下：（没有调style，所以偏向一边……）