點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

d3繪制基本的柱形圖的實現代碼

來源：懂視網責編：小采時間：2020-11-27 22:02:32

d3繪制基本的柱形圖的實現代碼

d3繪制基本的柱形圖的實現代碼:柱形圖，是使用柱形的長短來表示數據變化的圖表，也是最簡單的圖表之一。一般情況下，柱形圖包括：矩形、坐標軸和文字。 d3簡單理解就是通過在svg畫布上繪制基本圖形，本文將介紹d3繪制基本的柱形圖繪制畫布 import * as d3 from d3; var w

推薦度：

點擊下載本文 文檔為doc格式

導讀d3繪制基本的柱形圖的實現代碼:柱形圖，是使用柱形的長短來表示數據變化的圖表，也是最簡單的圖表之一。一般情況下，柱形圖包括：矩形、坐標軸和文字。 d3簡單理解就是通過在svg畫布上繪制基本圖形，本文將介紹d3繪制基本的柱形圖繪制畫布 import * as d3 from d3; var w

柱形圖，是使用柱形的長短來表示數據變化的圖表，也是最簡單的圖表之一。一般情況下，柱形圖包括：矩形、坐標軸和文字。

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（）后返回的是一個選擇集，即多出來的那部分元素。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

d3繪制基本的柱形圖的實現代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現代碼基本

熱門焦點

d3繪制基本的柱形圖的實現代碼

d3繪制基本的柱形圖的實現代碼

d3繪制基本的柱形圖的實現代碼

最新推薦

猜你喜歡

熱門推薦