柱形圖是圖表中常見的一種，這篇文章主要介紹了d3繪製基本的柱形圖的實現代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
柱形圖，是使用柱形的長短來表示數據變化的圖表，也是最簡單的圖表之一。一般情況下，柱形圖包括：矩形、座標軸和文字。
d3簡單理解就是通過在svg畫布上繪製基本圖形，本文將介紹d3繪製基本的柱形圖
繪製畫布
import * as d3 from "d3";
var width=300;//svg畫布寬
var height=200;//svg畫布高
//定義畫布
var svg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height)
.style("background-color","yellow")
繪製矩形
var rectWidth=30;//每個矩形的默認寬度
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})`)
結果
總結
1.畫布上的座標軸方向：
- x軸方向爲水平向右；
- y軸方向爲垂直向下；
2.矩形的基本屬性：
- x,y分別對應矩形左上角的座標軸；
- width，height分別對應矩形的寬和高；
- （本示例的數據可視化通過高度來體現）
3.由於默認的y軸方向爲垂直向下，所以爲了繪製柱形圖，我們需要通過attr矩形的transform屬性對矩形進行翻轉；
4.默認的矩形填充顏色爲黑色；
綁定數據
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")
結果
可以發現前兩個矩形的填充顏色和數據並沒有發生變化，後面的藍色矩形爲綁定數據後新append的元素；
如果前兩個矩形我們不設置高度，是否會通過數據集綁定上相關數據呢？
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")
結果
結果發現前兩個矩形不設置相關屬性和值的情況下，也沒有和數據集進行綁定，進行相關的可視化工作。
如果我們在綁定數據後立刻attr矩形的屬性呢？是否會有所改變呢？
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")
結果
前兩個矩形的顏色發生了改變。
現在我們改變一下數據集裏面數據的個數，看看會發生什麼情況？
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")
結果
我們發現如果數據集裏數據的個數只有一個，那麼只有第一個矩形的顏色會改變，第二個爲默認的黑色。
那麼如果在數據集不變的情況下，我們想改變第二個矩形的顏色該怎麼做呢？
//這裏我們使用exit()
svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.exit()
.attr("fill","red")
結果
總結
1.當選擇集中已經有了矩形，再進行綁定數據時，數據集中已經存在的矩形的數據不會根據數據集進行更新，會保持不變。
2.當選擇集與數據集進行綁定是會出現以下情況：
（1）當選擇集中的元素個數 小於 數據集中的元素個數，d3 會爲多出來的 data 生成佔位符，通過 enter() 處理之後就可以爲這些佔位符 append 元素。簡單理解：enter（）後的元素需要繼續進行可視化的工作。
（2）當選擇集中的元素個數 大於 數據集中的元素個數，通過 exit() 處理之後返回多出來那部分數據的元素選擇器(這時候接着執行 append 那就是在 rect 上 append rect 了)。簡單理解：exit（）後返回的是一個選擇集，即多出來的那部分元素。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。