d3入門篇（二）：繪制基本的柱形圖

張率功發(fā)布于2019-08-23 14:00 / 2863人閱讀

摘要：簡單理解后的元素需要繼續(xù)進行可視化的工作。當(dāng)選擇集中的元素個數(shù)大于數(shù)據(jù)集中的元素個數(shù)，通過處理之后返回多出來那部分?jǐn)?shù)據(jù)的元素選擇器這時候接著執(zhí)行那就是在上了。簡單理解后返回的是一個選擇集，即多出來的那部分元素。

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;//每個矩形的默認(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軸方向為垂直向下；
2.矩形的基本屬性：
    x,y分別對應(yīng)矩形左上角的坐標(biāo)軸；
    width，height分別對應(yīng)矩形的寬和高；
    （本示例的數(shù)據(jù)可視化通過高度來體現(xiàn)）
3.由于默認(rèn)的y軸方向為垂直向下，所以為了繪制柱形圖，我們需要通過attr矩形的transform屬性對矩形進行翻轉(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)前兩個矩形的填充顏色和數(shù)據(jù)并沒有發(fā)生變化，后面的藍(lán)色矩形為綁定數(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ù)只有一個，那么只有第一個矩形的顏色會改變，第二個為默認(rèn)的黑色。

那么如果在數(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() 處理之后返回多出來那部分?jǐn)?shù)據(jù)的元素選擇器(這時候接著執(zhí)行 append 那就是在 rect 上 append rect 了)。簡單理解：exit（）后返回的是一個選擇集，即多出來的那部分元素。

云服務(wù)器 GPU云服務(wù)器柱形圖 jquery flot柱形圖 html5動態(tài)柱形圖 js根據(jù)表格數(shù)據(jù)生成柱形圖

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99929.html

發(fā)表評論

登陸后可評論

0條評論

張率功

男|高級講師

我要關(guān)注我要私信

TA的文章

Pycharm 常用快捷鍵大全（上）

閱讀 2183·2021-11-19 09:40
新網(wǎng)雙11：注冊抽iphone盲盒，郵箱/主機/網(wǎng)站建設(shè)0元，域名-COM首年16元，CN首年8.8

閱讀 1917·2021-11-08 13:24
GitLab 正式在納斯達(dá)克上市，市值接近 150 億美元

閱讀 2452·2021-10-18 13:24
JWT開發(fā)工具

閱讀 2857·2021-10-11 10:57
如何遠(yuǎn)程連接云主機名-云主機怎么遠(yuǎn)程操作？

閱讀 3577·2021-09-22 15:42
FE.TEST-前端測試初探

閱讀 1114·2019-08-29 17:11
腳本模式創(chuàng)建測試用例 - Katalon Studio

閱讀 2527·2019-08-29 16:11
來學(xué)習(xí)一下怎么使用postcss吧

閱讀 2420·2019-08-29 11:11

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

d3入門篇（二）：繪制基本的柱形圖

相關(guān)文章

d3.js 創(chuàng)建完整柱形圖

d3入門篇（四）：繪制完整柱狀圖添加過渡效果

爬取淘寶上4000條月餅數(shù)據(jù)，制作了一個酷炫的可視化大屏！

d3入門篇（三）：比例尺坐標(biāo)軸

d3.js交互圖表

發(fā)表評論

0條評論

張率功

男|高級講師

TA的文章

Pycharm 常用快捷鍵大全（上）

新網(wǎng)雙11：注冊抽iphone盲盒，郵箱/主機/網(wǎng)站建設(shè)0元，域名-COM首年16元，CN首年8.8

GitLab 正式在納斯達(dá)克上市，市值接近 150 億美元

JWT開發(fā)工具

如何遠(yuǎn)程連接云主機名-云主機怎么遠(yuǎn)程操作？

FE.TEST-前端測試初探

腳本模式創(chuàng)建測試用例 - Katalon Studio

來學(xué)習(xí)一下怎么使用postcss吧

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

d3入門篇（二）：繪制基本的柱形圖

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！