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

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，所以偏向一边……）

 

​​

作为一个非职业前端开发，其实一开始我对D3 的概念是非常模糊的，知识知道是一个数据可视化（画图）的包。那么究竟什么是D3呢？

我的理解是：用代码来画图的工具。

 

2、用D3画简单的条形图

还是先放上效果：

 

​