D3系列07-比例尺

比例尺是用來(lái)映射值域(真實(shí)值)和畫(huà)布(svg)之間對(duì)應(yīng)關(guān)系的工具。

比例尺分為線性比例尺,d3.scale.linear().domain(array1[]).range(array2[]);

序列比例尺,d3.scale.ordinal().domain(序列值).rangeRoundBands(畫(huà)布上多范圍)。

畫(huà)布是人看到的區(qū)域,而圖形圖表的大小可能很大或者很小,體現(xiàn)在畫(huà)布上要么是太大了放不下,太小了分不清。所以需要按比例進(jìn)行縮放。

比例尺一般結(jié)合坐標(biāo)軸來(lái)用。

定義圖形時(shí)要注意,x軸是從左到右走,y軸從上往下走。具體到比如柱形圖,若某一個(gè)柱形在y方向上的起點(diǎn)值越小,相對(duì)于y方向上的偏移量dy越大,則該柱形越矮。

繪制柱形圖的一般步驟:

01.定義畫(huà)布

02.定義柱形的數(shù)組

03.定義x軸比例尺,y軸比例尺,x軸坐標(biāo),y軸坐標(biāo)

04.繪制柱形

05.繪制坐標(biāo)

06.繪制柱形對(duì)應(yīng)的文字

07.為柱形,坐標(biāo),文字添加樣式

08.適當(dāng)?shù)臑槲淖郑翁砑觿?dòng)效

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容