資訊專欄INFORMATION COLUMN
摘要：簡(jiǎn)單理解后的元素需要繼續(xù)進(jìn)行可視化的工作。當(dāng)選擇集中的元素個(gè)數(shù)大于數(shù)據(jù)集中的元素個(gè)數(shù)，通過(guò)處理之后返回多出來(lái)那部分?jǐn)?shù)據(jù)的元素選擇器這時(shí)候接著執(zhí)行那就是在上了。簡(jiǎn)單理解后返回的是一個(gè)選擇集，即多出來(lái)的那部分元素。
d3簡(jiǎn)單理解就是通過(guò)在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)樗较蛴遥? y軸方向?yàn)榇怪毕蛳拢?2.矩形的基本屬性：
x,y分別對(duì)應(yīng)矩形左上角的坐標(biāo)軸；
width，height分別對(duì)應(yīng)矩形的寬和高；
（本示例的數(shù)據(jù)可視化通過(guò)高度來(lái)體現(xiàn)）
3.由于默認(rèn)的y軸方向?yàn)榇怪毕蛳拢詾榱死L制柱形圖，我們需要通過(guò)attr矩形的transform屬性對(duì)矩形進(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ì)通過(guò)數(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)的可視化工作。
如果我們?cè)诮壎〝?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é)果
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ì)為多出來(lái)的 data 生成占位符，通過(guò) enter() 處理之后就可以為這些占位符 append 元素。簡(jiǎn)單理解：enter（）后的元素需要繼續(xù)進(jìn)行可視化的工作。
（2）當(dāng)選擇集中的元素個(gè)數(shù) 大于 數(shù)據(jù)集中的元素個(gè)數(shù)，通過(guò) exit() 處理之后返回多出來(lái)那部分?jǐn)?shù)據(jù)的元素選擇器(這時(shí)候接著執(zhí)行 append 那就是在 rect 上 append rect 了)。簡(jiǎn)單理解：exit（）后返回的是一個(gè)選擇集，即多出來(lái)的那部分元素。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/99929.html
摘要：之前只是各個(gè)部分的，現(xiàn)在將各部分整合起來(lái)，發(fā)現(xiàn)還是學(xué)到了不少東西主要是加深了對(duì)比例尺的理解代碼樣式及數(shù)據(jù)樣式接著是數(shù)據(jù)及柱狀圖寬高等留白用創(chuàng)建比例尺實(shí)踐之后對(duì)比例尺與坐標(biāo)軸的理解加深了一點(diǎn)軸使用線性比例尺，注意輸入域軸使用比例尺用于柱形 d3js.org v5.9.2 之前只是各個(gè)部分的demo，現(xiàn)在將各部分整合起來(lái)，發(fā)現(xiàn)還是學(xué)到了不少東西 主要是加深了對(duì)scale（比例尺）的理解...
摘要：這篇學(xué)習(xí)筆記是入門篇的最后一部分，將前幾篇的內(nèi)容整合到一起，繪制帶過(guò)渡效果的柱狀圖，這次先給大家看一下結(jié)果圖。 這篇學(xué)習(xí)筆記是入門篇的最后一部分，將前幾篇的內(nèi)容整合到一起，繪制帶過(guò)渡效果的柱狀圖，這次先給大家看一下結(jié)果圖。 結(jié)果 showImg(https://segmentfault.com/img/bVblfGG?w=1230&h=1210); 前言 先放結(jié)果圖是想反饋一下在整合基...
摘要：基于此，我爬取了淘寶上多條月餅的銷售數(shù)據(jù)，為大家展示了一幅漂亮的可視化大屏，解決大家心目中的問題。模塊的安裝與配置這次爬取淘寶，采用的是最簡(jiǎn)單的方式控制瀏覽器進(jìn)行自動(dòng)化操作，中途只需要掃碼登陸一次，即可完成整個(gè)數(shù)據(jù)的爬取。 ...
摘要：為了根據(jù)顯示刻度靈活變化寬高，而不是定死，特別是數(shù)據(jù)差異性很大的時(shí)候，我們希望圖表顯示范圍都在畫布里面，這時(shí)就會(huì)引入比例尺的概念來(lái)進(jìn)行縮放。根據(jù)這些規(guī)則，會(huì)為我們返回一個(gè)比例尺函數(shù)。 這篇文章繼續(xù)介紹d3的基礎(chǔ)知識(shí) 比例尺 在繪制柱狀圖時(shí)，我們往往會(huì)定義很大的畫布，然而我們要可視化的數(shù)據(jù)確很小，這時(shí)會(huì)出現(xiàn)很多留白 的情況。為了根據(jù)顯示刻度靈活變化寬高，而不是定死，特別是數(shù)據(jù)差異性很大的...
閱讀 2407·2021-11-19 09:40
閱讀 1989·2021-11-08 13:24
閱讀 2529·2021-10-18 13:24
閱讀 2944·2021-10-11 10:57
閱讀 3655·2021-09-22 15:42
閱讀 1179·2019-08-29 17:11
閱讀 2618·2019-08-29 16:11
閱讀 2473·2019-08-29 11:11
