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 () {
}
}
</script>
<style scoped>
</style>
上边的代码做了两个事情，⾸先在html页⾯中添加了⼀个<p>标签，然后在js中调⽤d3相关代码，获取到html中的对象，然后为其添加了“Hello world”的⽂字。效果如下：（没有调style，所以偏向⼀边……）
作为⼀个⾮职业前端开发，其实⼀开始我对D3 的概念是⾮常模糊的，知识知道是⼀个数据可视化（画图）的包。那么究竟什么是D3呢？
我的理解是：⽤代码来画图的⼯具。
2、⽤D3画简单的条形图
还是先放上效果：
代码如下：
<template>
<div>
<h1>超简易条形图</h1>
<svg class="bar-chart"></svg>
</div>
</template>
<script>
import * as d3 from 'd3'
export default {
name: 'demo002',
data () {
return {
dataset: [100, 80, 78, 98, 93, 82],
svgWidth: 500,
svgHeight: 300,
barPadding: 5
}
},
methods: {
initChart () {
let barWidth = (this.svgWidth / this.dataset.length)      let svg = d3.select('svg')
.
attr('width', this.svgWidth)
.attr('height', this.svgHeight)
let yScale = d3.scaleLinear()
.domain([0, d3.max(this.dataset)])
.range([0, this.svgHeight - 20])
svg图形let barChart = svg.selectAll('rect')
.data(this.dataset)
.enter()
.append('rect')
.attr('y', d => this.svgHeight - yScale(d))
.attr('height', d => yScale(d))
.
attr('width', barWidth - this.barPadding)
.attr('transform', (d, i) => {
let translate = [ barWidth * i, 0 ]
return 'translate(' + translate + ')'
})
})
.attr('fill', '#566fde')
// alert(1)
// return barChart
let text = svg.selectAll('text')
.data(this.dataset)
.
enter()
.append('text')
.text(d => d)
.attr('y', (d, i) => this.svgHeight - yScale(d) - 2)
.attr('x', (d, i) => barWidth * i)
.attr('fill', '#000000')
console.log(barChart, text, yScale)
}
},
mounted () {
this.initChart()
}
}
</script>
<style scoped>
</style>
代码逻辑：
1.标签
⾸先在html部分中定义标题和svg标签，也就是下边两⾏：
<div>
<h1>超简易条形图</h1>
<svg class="bar-chart"></svg>
</div>
再套⼀层div是因为vue规定⼀个<template>中只有⼀个标签，其他的都要套在⾥边。
2.js部分
js包含了四个部分：定义范围，缩放，画图，添加⽂字。
定义范围
就是定义图画的⼤⼩。对应的代码是这⼏⾏：
let barWidth = (this.svgWidth / this.dataset.length)
let svg = d3.select('svg')
.attr('width', this.svgWidth)
.attr('height', this.svgHeight)
注意的是，this开头的都是在data中定义好的数据。这⾥定义了条形图中“条”的宽度，以及svg的画布⼤⼩（也就是整个图形的⼤⼩）。
缩放
就是对数据的缩放，主要的作⽤就是放⼤数据的特征。对应的代码是以下⼏⾏：
let yScale = d3.scaleLinear()
.domain([0, d3.max(this.dataset)])
.range([0, this.svgHeight - 20])
这⾥⽤到的是d3的线性缩放函数：scaleLinear()。使⽤这个函数需要设定两个值，⼀个是domain，⼀个是range。分别对应的是传⼊的数据的范围，这⾥⽤的是0到数据的最⼤值（⽤d3的max函数获取），也可以⽤数据值的最⼩值到最⼤值（如下图），但是这种做法不使⽤于条形图，所以我没有采⽤。
range对应的是说上边domain中设定的范围对应图形的是什么范围，这⾥⽤的是0到最⼤⾼度减去20（为了美观，留了⼀点距离）
画图
由于上边的第⼀步就设定了⼀个svg对象（通过d3的选择其获取到html中的svg标签的来，这种操作和jquery⽐较类似，毕竟d3也是那个年代的产物），所以这⾥就直接操作svg对象。
let barChart = svg.selectAll('rect')    // 获取rect对象
.data(this.dataset)      // 设置数据
.enter()        // 进⼊数据
.append('rect')        // 增加rect
.attr('y', d => this.svgHeight - yScale(d)) // 增加⼀个参数y
.attr('height', d => yScale(d))    // 设置⾼度
.attr('width', barWidth - this.barPadding) // 设置宽度
.attr('transform', (d, i) => {    // 设置transform
let translate = [ barWidth * i, 0 ]  // 这⾥是⼀个函数
return 'translate(' + translate + ')'
})
.attr('fill', '#566fde')    // 填充的颜⾊
这⾥有⼀个⽐较奇怪的参数——transform。这个是svg的⼀个属性，主要⽤于坐标轴的偏移。简单来说，就是画完⼀个柱⼦之后，下⼀个柱⼦在哪⾥画，如果这⾥设置了⼀个固定的值，那么所有的柱⼦就会重叠到⼀起:
添加⽂字
从上图可以看到，在条形图在出现问题重叠的时候，上边的⽂字是不会重叠。这是因为⽂字和图是分开画的，添加⽂字的代码如下：
let text = svg.selectAll('text')
.data(this.dataset)
.enter()
.append('text')
.text(d => d)
.attr('y', (d, i) => this.svgHeight - yScale(d) - 2)
.attr('x', (d, i) => barWidth * i)
.attr('fill', '#000000')
这段代码⾥边并没有设置translate属性，但是⽂字也没有重叠，原因是因为其⽤了x属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。