摘要：這篇學(xué)習(xí)筆記是入門篇的最后一部分，將前幾篇的內(nèi)容整合到一起，繪制帶過渡效果的柱狀圖，這次先給大家看一下結(jié)果圖。

這篇學(xué)習(xí)筆記是入門篇的最后一部分，將前幾篇的內(nèi)容整合到一起，繪制帶過渡效果的柱狀圖，這次先給大家看一下結(jié)果圖。

結(jié)果

先放結(jié)果圖是想反饋一下在整合基礎(chǔ)知識繪制完整柱狀圖遇到的幾個問題：

整個柱狀圖的布局，比如哪些元素包在一個標(biāo)簽下，哪些元素是嵌套關(guān)系；

如果不采用translate，transform?翻轉(zhuǎn)height屬性的值，如何讓矩形正常方向顯示；

如何繪制文字；

如何為柱狀圖添加過渡效果；

坐標(biāo)軸的位置如何確定，x軸如何劃分刻度，如何讓刻度顯示在矩形的正下方；

?。。?！ 接下來將逐個解決上述出現(xiàn)的問題！?。?！

Solution

（1）為了繪制時，圖形四周留有空白區(qū)域，我們首先設(shè)置一個padding值；
var padding={top:40,bottom:40,left:40,right:40};//定義間隔
（2）我們考慮在svg畫布上進(jìn)行繪制，采用如下的結(jié)構(gòu)進(jìn)行繪圖：
    

Solution
之前的幾篇文章我都是通過transform變換實(shí)現(xiàn)了矩形的翻轉(zhuǎn)，這篇文章介紹一個新的思路。
首先確定一個矩形需要四要素（x,y,width,height），同時我們需要注意，畫布的坐標(biāo)軸方向?yàn)樗较蛴液痛怪毕蛳?。height是我們數(shù)據(jù)可視化的展示部分，即數(shù)據(jù)的綁定部分，x,y確定了繪制矩形的左上角坐標(biāo)。
這里提供一個思路：
如果按照正常垂直向下的方向繪制矩形時，要求矩形的bottom處在同一水平線上，y+height==固定值；也就是數(shù)據(jù)（height）大的部分，我們希望矩形的繪制起始點(diǎn)（y）的值較小，數(shù)據(jù)?。╤eight）的部分，我們希望矩形的繪制起始點(diǎn)（y）的值較大。
因此我們可以通過定義比例尺完成這個功能，將dataset中大的數(shù)值，映射出range中小的數(shù)值。

//定義y方向比例尺
var yScale=d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([height-padding.top-padding.bottom,0]);
//定義y的值
.attr("y",function (d,i) {
    return yScale(d)
})
//定義height
.attr("height",function (d,i) {
    return height-padding.top-padding.bottom-yScale(d);
})

可以看出來‘y’+‘height’==height-padding.top-padding.bottom(這是一個固定的值)

Solution
在Problem1中已經(jīng)解決的布局方案問題，我們的方法是將矩形與文字包在一個g標(biāo)簽下，所以繪制文字與繪制矩形的方法相同，在標(biāo)簽下添加標(biāo)簽，同時需要設(shè)定：
(1)文字的顯示位置：x,y
(2)文本信息：text
(3)文字位置的偏移值：dx,dy

graph.append("text")
.style("fill","pink")
.attr("x",function(d,i){
    return xScale(i);
})
.text(function (d) {
    return d
})
.attr("y",function (d,i) {
    return yScale(d);
})

Solution
為柱狀圖添加過渡效果，我們需要調(diào)用以下API：

.transition():為這個元素添加過渡；

.duration()：設(shè)定元素從起始狀態(tài)到終止?fàn)顟B(tài)的過渡時間；

.delay()：設(shè)定元素執(zhí)行過渡效果的時間間隔；

.ease()：設(shè)定過渡的動畫效果；

在為元素添加過渡效果時，初始狀態(tài)，終止?fàn)顟B(tài)尤為重要，柱狀圖為例分析一下元素的兩個狀態(tài)：

明確柱形圖為每個矩形添加過渡時，只有兩個屬性值需要改變，一個是y的值，一個是height的值；

起始狀態(tài)：柱狀圖的起始狀態(tài)非常好理解，就是矩形不顯示的狀態(tài)，即y值設(shè)定為前文提到的固定值，height設(shè)定為0；
終止?fàn)顟B(tài)：柱狀圖的終止?fàn)顟B(tài)應(yīng)該是矩形元素和文字都可視化固定顯示出來，即為正常綁定元素時設(shè)定的相關(guān)屬性值。

//為矩形添加過渡效果
.attr("y",function (d) {
    var min=yScale.domain()[0];
    return yScale(min);
})
.attr("height",function(d,i){
    return 0;
})
.transition()
.duration(2000)
.delay(function(d,i){
    return i*400;
})
.ease(d3.easeBackOut)
.attr("y",function (d,i) {
    return yScale(d)
})
.attr("height",function (d,i) {
    return height-padding.top-padding.bottom-yScale(d);
})

Solution
在開始學(xué)習(xí)坐標(biāo)軸的時候，只實(shí)現(xiàn)了添加y軸，在這次完整柱狀圖實(shí)現(xiàn)中，嘗試添加x軸卻遇到了問題。在這個例子中我們一共綁定了8個數(shù)據(jù)，那么如何讓x軸的刻度均勻的顯示在每個矩形的下方呢？
在定義x軸的時候我用了ScaleBand()這個方法：

//在range返回等差數(shù)列
var xScale=d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0,dataset.length*(rectWidth+(rectPadding/2))]);
var xAxis=d3.axisBottom(xScale)
.ticks(5);

既然比例尺返回一個等差數(shù)列，所以我們要求在柱狀圖區(qū)域，每個矩形和空白間隔這個整體是相同的，所以我的實(shí)現(xiàn)是每個矩形左右各是半個rectPadding。先設(shè)置x的值，然后width設(shè)置成矩形寬度減去半個間隔。（不理解的可以自己畫一張圖就可以了）

.attr("x",function (d,i) {
    return (i*rectWidth)+(i+1)*(rectPadding/2);
})
.attr("width",rectWidth-rectPadding/2)

代碼部分

import * as d3 from "d3";

var dataset = [45, 70, 12, 79, 4, 127, 33, 150];
var width = 600;//svg畫布寬
var height = 600;//svg畫布高
var rectWidth = 50;//每個矩形的默認(rèn)寬度
var rectPadding=10;//每個矩形間的間隔
var padding={top:40,bottom:40,left:40,right:40};//定義間隔
//定義畫布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "yellow");
//定義矩形比例尺

var yScale=d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([height-padding.top-padding.bottom,0]);
var yAxis=d3.axisLeft(yScale)
.ticks(5);
svg.append("g")
.attr("transform",`translate(${padding.top},${padding.left})`)
.call(yAxis);

var xScale=d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0,dataset.length*(rectWidth+(rectPadding/2))]);
var xAxis=d3.axisBottom(xScale)
.ticks(5);
svg.append("g")
.attr("transform",`translate(${padding.left},${height-padding.top})`)
.call(xAxis);

//定義矩形
var g=d3.selectAll("svg")
.append("g")
.attr("transform",`translate(${padding.top},${padding.left})`);

var graph=g.selectAll("rect")
.data(dataset)
.enter()
.append("g");

graph.append("rect")
.style("fill","blue")
.attr("x",function (d,i) {
    return (i*rectWidth)+(i+1)*(rectPadding/2);
})
.attr("width",rectWidth-rectPadding/2)
.attr("y",function (d) {
    var min=yScale.domain()[0];
    return yScale(min);
})
.attr("height",function(d,i){
    return 0;
})
.transition()
.duration(2000)
.delay(function(d,i){
    return i*400;
})
//.ease(d3.easeBackOut)
.attr("y",function (d,i) {
    return yScale(d)
})
.attr("height",function (d,i) {
    return height-padding.top-padding.bottom-yScale(d);
})

graph.append("text")
.style("fill", "pink")
.attr("x", function (d, i) {
    return (i * rectWidth) + (i + 1) * (rectPadding / 2);
})
.attr("dx", 10)
.attr("y", function (d) {
    var min = d3.min(dataset);
    return yScale(min)
})
.text(function (d) {
    return d
})
.transition()
.duration(2000)
.delay(function (d, i) {
    return i * 400;
})
.attr("y", function (d, i) {
    return yScale(d);
})

接下來會寫進(jìn)階篇的學(xué)習(xí)筆記