学习d3时遇到的v3 v4 接口变化记录
2018-05-24 本文已影响67人
woodccc
Kapture 2018-05-24 at 21.03.58.gif
参考
要做一个柱状图，实在有太多的选择。例如 echarts等图库，简单的配置一下就能实现。但是想用 d3 就不是那么容易了，但是还是愿意尝试一下。原本 d3 有很多教程，根据教程要实现一个柱状图按理说也不难。可是，找到的教程大多是 d3 v3版本的，v4 api 的改动还是蛮大的。在做 demo 的过程中遇到不少问题，记录一下用 v4作一个柱状图的过程。
学习时主要是根绝这篇教程，但是太多的 api 都是 v3的。改成 v4也着实费了不少劲。直接用 vue-cli 新建一个项目，在 app.vue 开始写。以下就是全部代码，依赖主要是 d3.js，没别的了。主要介绍一下 v3 和 v4 接口有差别的地方。一行行代码来说。
<template>
<div class="hello">
<svg></svg>
</div>
</template>
<script>
import * as d3 from "d3"
export default {
name: 'HelloWorld',
mounted() {
const width = 500
const height = 500
const dataset = [10, 20, 30, 40, 33, 24, 12, 5]
const padding = { left: 30, right: 30, top: 20, bottom: 20 }
const rectPadding = 4
const svg = d3
.select('svg')
.attr('width', width)
.attr('height', height)
const xScale = d3
.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, width - padding.left - padding.right])
const yScale = d3
.scaleLinear()
.domain([0, d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0])
const xAxis = d3.axisBottom(xScale)
const yAxis = d3.axisLeft(yScale)
svg
.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr('x', (d, i) => {
return (xScale.bandwidth() + xScale.paddingInner()) * i
})
.attr('y', (d, i) => {
return yScale(d)
})
.attr('height', (d, i) => {
return height - padding.top - padding.bottom - yScale(d)
})
.attr('width', xScale.bandwidth() - rectPadding)
.attr('fill', 'green')
svg
.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr('x', (d, i) => {
return (xScale.bandwidth() + xScale.paddingInner()) * i
})
.attr('y', (d, i) => {
return yScale(d)
})
.attr("dx", function() {
return xScale.bandwidth() / 2 - rectPadding;
})
.attr("dy", 20)
.text((d) => d)
svg
.append('g')
.attr("class", "axis")
.attr("transform", `translate(${padding.left},${height - padding.bottom})`)
.call(xAxis)
svg
.append('g')
.attr("class", "axis")
.attr("transform", `translate(${padding.left},${padding.bottom})`)
.call(yAxis)
svg
.selectAll('rect')
.on("mouseover",function(d,i){
d3.select(this)
.transition()
.duration(100)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","green");
});
}
}
</script>
<style scoped>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<svg>
d3 虽然也支持 canvas，但是很多接口都是只支持 svg。所以用 svg好一些，当然在 v4里面更好的支持了 canvas，但是我还没学到那里。
首先在 template 中 创建一个 svg 元素，然后用d3 选择 svg 元素，设置宽、高属性。
x 轴比例尺
问题主要是从第八课 完整的柱形图开始。在教程中，设置 x 轴比例尺时，使用了如下代码：
//x轴的比例尺
var xScale = d3.scale.ordinal() // d3.scale.ordinal() v4 中改成了d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, width - padding.left - padding.right]); //rangeRoundBands 也改成了 rangeRound
v4中 x 轴的比例尺应该这样子写：
const xScale = d3
.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, width - padding.left - padding.right])
y 轴比例尺
v3 Y轴比例尺是这样的，这个没有太大变化。
//y轴的比例尺
var yScale = d3.scale.linear() //d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]);
定义坐标轴
//定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
//定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//x 轴刻度的方向向下，y 轴的向左。
在 v4中，使用axisLeft 和 axisBottom接口。
const xAxis = d3.axisBottom(xScale)
const yAxis = d3.axisLeft(yScale)
设置柱子 x 坐标
在设置 x 坐标时，要用到 x 轴比例尺。由于x 轴比例尺完全变了，所以变动也比较大。v3中
……
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
……
v4中
.attr('x', (d, i) => {
return (xScale.bandwidth() + xScale.paddingInner()) * i
})
这里要用张图来解释一下，柱子的宽度用 xScale.bandwidth() 获取
image.png
柱子宽度
设置柱子宽度的属性时，v3
……
.attr("width", xScale.rangeBand() - rectPadding )
……
v4
……
.attr('width', xScale.bandwidth() - rectPadding)
……
