快捷導(dǎo)航

d3繪制基本的柱形圖的實(shí)現(xiàn)代碼

更新時(shí)間：2018年12月12日 14:09:04 作者：winteraq

柱形圖是圖表中常見(jiàn)的一種，這篇文章主要介紹了d3繪制基本的柱形圖的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

柱形圖，是使用柱形的長(zhǎng)短來(lái)表示數(shù)據(jù)變化的圖表，也是最簡(jiǎn)單的圖表之一。一般情況下，柱形圖包括：矩形、坐標(biāo)軸和文字。

d3簡(jiǎn)單理解就是通過(guò)在svg畫(huà)布上繪制基本圖形，本文將介紹d3繪制基本的柱形圖

繪制畫(huà)布

import * as d3 from "d3";
var width=300;//svg畫(huà)布寬
var height=200;//svg畫(huà)布高
//定義畫(huà)布
var svg=d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height)
  .style("background-color","yellow")

繪制矩形

var rectWidth=30;//每個(gè)矩形的默認(rèn)寬度
svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",40)
.attr("x",0)
.attr("y",200)
.attr("transform",`translate(0,${-40})`)

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",20)
.attr("x",rectWidth)
.attr("y",200)
.attr("transform",`translate(0,${-20})`)

結(jié)果

總結(jié)

1.畫(huà)布上的坐標(biāo)軸方向：

x軸方向?yàn)樗较蛴遥?/li>
y軸方向?yàn)榇怪毕蛳拢?/li>

2.矩形的基本屬性：

x,y分別對(duì)應(yīng)矩形左上角的坐標(biāo)軸；
width，height分別對(duì)應(yīng)矩形的寬和高；
（本示例的數(shù)據(jù)可視化通過(guò)高度來(lái)體現(xiàn)）

3.由于默認(rèn)的y軸方向?yàn)榇怪毕蛳?，所以為了繪制柱形圖，我們需要通過(guò)attr矩形的transform屬性對(duì)矩形進(jìn)行翻轉(zhuǎn)；

4.默認(rèn)的矩形填充顏色為黑色；

綁定數(shù)據(jù)

var dataset=[45,70,12,79,4,127,33,90];
svg.selectAll("rect")
.data(dataset)
// .attr("fill","white")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
   return d
})
.attr("x",function (d,i) {
   return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
  return `translate(0,${-d})`
})
.attr("fill","blue")

結(jié)果

可以發(fā)現(xiàn)前兩個(gè)矩形的填充顏色和數(shù)據(jù)并沒(méi)有發(fā)生變化，后面的藍(lán)色矩形為綁定數(shù)據(jù)后新append的元素；

如果前兩個(gè)矩形我們不設(shè)置高度，是否會(huì)通過(guò)數(shù)據(jù)集綁定上相關(guān)數(shù)據(jù)呢？

svg.append("rect")
svg.append("rect")
var dataset=[45,70,12,79,4,127,33,90];
svg.selectAll("rect")
.data(dataset)
// .attr("fill","white")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
   return d
})
.attr("x",function (d,i) {
   return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
  return `translate(0,${-d})`
})
.attr("fill","blue")

結(jié)果

結(jié)果發(fā)現(xiàn)前兩個(gè)矩形不設(shè)置相關(guān)屬性和值的情況下，也沒(méi)有和數(shù)據(jù)集進(jìn)行綁定，進(jìn)行相關(guān)的可視化工作。

如果我們?cè)诮壎〝?shù)據(jù)后立刻attr矩形的屬性呢？是否會(huì)有所改變呢？

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",40)
.attr("x",0)
.attr("y",200)
.attr("transform",`translate(0,${-40})`)

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",20)
.attr("x",rectWidth)
.attr("y",200)
.attr("transform",`translate(0,${-20})`)

var dataset=[45,70,12,79,4,127,33,90];

svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
   return d
})
.attr("x",function (d,i) {
   return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
  return `translate(0,${-d})`
})
.attr("fill","blue")

結(jié)果

前兩個(gè)矩形的顏色發(fā)生了改變。

現(xiàn)在我們改變一下數(shù)據(jù)集里面數(shù)據(jù)的個(gè)數(shù)，看看會(huì)發(fā)生什么情況？

var dataset=[45];
//,70,12,79,4,127,33,90
svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
   return d
})
.attr("x",function (d,i) {
   return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
  return `translate(0,${-d})`
})
.attr("fill","blue")

結(jié)果

我們發(fā)現(xiàn)如果數(shù)據(jù)集里數(shù)據(jù)的個(gè)數(shù)只有一個(gè)，那么只有第一個(gè)矩形的顏色會(huì)改變，第二個(gè)為默認(rèn)的黑色。

那么如果在數(shù)據(jù)集不變的情況下，我們想改變第二個(gè)矩形的顏色該怎么做呢？

//這里我們使用exit()
svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.exit()
.attr("fill","red")

結(jié)果

總結(jié)

1.當(dāng)選擇集中已經(jīng)有了矩形，再進(jìn)行綁定數(shù)據(jù)時(shí)，數(shù)據(jù)集中已經(jīng)存在的矩形的數(shù)據(jù)不會(huì)根據(jù)數(shù)據(jù)集進(jìn)行更新，會(huì)保持不變。

2.當(dāng)選擇集與數(shù)據(jù)集進(jìn)行綁定是會(huì)出現(xiàn)以下情況：

（1）當(dāng)選擇集中的元素個(gè)數(shù) 小于數(shù)據(jù)集中的元素個(gè)數(shù)，d3 會(huì)為多出來(lái)的 data 生成占位符，通過(guò) enter() 處理之后就可以為這些占位符 append 元素。簡(jiǎn)單理解：enter（）后的元素需要繼續(xù)進(jìn)行可視化的工作。

（2）當(dāng)選擇集中的元素個(gè)數(shù) 大于數(shù)據(jù)集中的元素個(gè)數(shù)，通過(guò) exit() 處理之后返回多出來(lái)那部分?jǐn)?shù)據(jù)的元素選擇器(這時(shí)候接著執(zhí)行 append 那就是在 rect 上 append rect 了)。簡(jiǎn)單理解：exit（）后返回的是一個(gè)選擇集，即多出來(lái)的那部分元素。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: