這篇文章給大家分享的是有關(guān)d3怎么繪制基本的柱形圖的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的利津網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!柱形圖,是使用柱形的長短來表示數(shù)據(jù)變化的圖表,也是最簡單的圖表之一。一般情況下,柱形圖包括:矩形、坐標(biāo)軸和文字。
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;//每個(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.畫布上的坐標(biāo)軸方向:
x軸方向?yàn)樗较蛴遥?/p>
y軸方向?yàn)榇怪毕蛳拢?/p>
2.矩形的基本屬性:
x,y分別對應(yīng)矩形左上角的坐標(biāo)軸;
width,height分別對應(yīng)矩形的寬和高;
(本示例的數(shù)據(jù)可視化通過高度來體現(xiàn))
3.由于默認(rèn)的y軸方向?yàn)榇怪毕蛳?,所以為了繪制柱形圖,我們需要通過attr矩形的transform屬性對矩形進(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ù)并沒有發(fā)生變化,后面的藍(lán)色矩形為綁定數(shù)據(jù)后新append的元素;
如果前兩個(gè)矩形我們不設(shè)置高度,是否會(huì)通過數(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)屬性和值的情況下,也沒有和數(shù)據(jù)集進(jìn)行綁定,進(jìn)行相關(guān)的可視化工作。
如果我們在綁定數(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ì)為多出來的 data 生成占位符,通過 enter() 處理之后就可以為這些占位符 append 元素。簡單理解:enter()后的元素需要繼續(xù)進(jìn)行可視化的工作。
(2)當(dāng)選擇集中的元素個(gè)數(shù) 大于 數(shù)據(jù)集中的元素個(gè)數(shù),通過 exit() 處理之后返回多出來那部分?jǐn)?shù)據(jù)的元素選擇器(這時(shí)候接著執(zhí)行 append 那就是在 rect 上 append rect 了)。簡單理解:exit()后返回的是一個(gè)選擇集,即多出來的那部分元素。
感謝各位的閱讀!關(guān)于“d3怎么繪制基本的柱形圖”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
當(dāng)前標(biāo)題:d3怎么繪制基本的柱形圖-創(chuàng)新互聯(lián)
本文路徑:http://bm7419.com/article28/ddpjcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、App設(shè)計(jì)、網(wǎng)站收錄、商城網(wǎng)站、虛擬主機(jī)、電子商務(wù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容