d3怎么繪制基本的柱形圖

這篇文章給大家分享的是有關(guān)d3怎么繪制基本的柱形圖的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為任丘企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站設(shè)計，任丘網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

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})`)

結(jié)果

總結(jié)

1.畫布上的坐標軸方向：

• x軸方向為水平向右；

• y軸方向為垂直向下；

2.矩形的基本屬性：

• x,y分別對應(yīng)矩形左上角的坐標軸；

• width，height分別對應(yīng)矩形的寬和高；

• （本示例的數(shù)據(jù)可視化通過高度來體現(xiàn)）

3.由于默認的y軸方向為垂直向下，所以為了繪制柱形圖，我們需要通過attr矩形的transform屬性對矩形進行翻轉(zhuǎn)；

4.默認的矩形填充顏色為黑色；

綁定數(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)前兩個矩形的填充顏色和數(shù)據(jù)并沒有發(fā)生變化，后面的藍色矩形為綁定數(shù)據(jù)后新append的元素；

如果前兩個矩形我們不設(shè)置高度，是否會通過數(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)前兩個矩形不設(shè)置相關(guān)屬性和值的情況下，也沒有和數(shù)據(jù)集進行綁定，進行相關(guān)的可視化工作。

如果我們在綁定數(shù)據(jù)后立刻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")

結(jié)果

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

現(xiàn)在我們改變一下數(shù)據(jù)集里面數(shù)據(jù)的個數(shù)，看看會發(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ù)的個數(shù)只有一個，那么只有第一個矩形的顏色會改變，第二個為默認的黑色。

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

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

結(jié)果

總結(jié)

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

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

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

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

感謝各位的閱讀！關(guān)于“d3怎么繪制基本的柱形圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁名稱：d3怎么繪制基本的柱形圖
網(wǎng)頁URL：http://muchs.cn/article36/ihsjpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、微信小程序、微信公眾號、電子商務(wù)、網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)