D3.js 入門教程 基礎 詳細 一步步來
碼字不易—口水少來–有用請好評-打賞也行喔
為了初學者,本文儘量細緻再細緻,覺得太囉嗦的大牛繞過—-我膜拜您
需求:完整柱狀圖
備註:前奏選擇器、比例尺、座標軸等基礎知識不在贅敘,下面會有相關連結;
推薦連結:別個的教程 https://blog.csdn.net/qq_34414916/article/details/80029352
正文開始:
本文旨在封裝一個基於d3 多端適配的柱狀圖元件 所以大家看到的會是一個方法;
方法外殼:
MendegBar = (DataObject) => {
//移動端適配 預計padding以及width、height會通過一個膠著方法,以此判斷是否進行適配
let { dom = "", height, width, padding = { top: 20, left: 20, bottom: 20, right: 20 } } = DataObject;
if (dom === "") {
console.log("dom不存在 !");
}
//padding:圖表分組位置引數
//沒有傳入height時便獲取dom的寬高
height ? null : height = d3.select(dom).node().getBoundingClientRect(). height;
width ? null : width = d3.select(dom).node().getBoundingClientRect().width;
}
首先需要畫布,也就是即將展現資料的地方(區域),推薦使用svg
//新建畫布
let svg = d3
.select(dom)
.append("svg")
.attr("height", height)
.attr("width", width)
.style ("background", "#fff");
有了畫布,我們得為以後的操作流出餘地,也就是可能會出現一個畫布好幾個圖表的情況發生,所以需要一個組,用來將我們的一個個圖表裝起來;
//定義一個裝圖表的分組並且確定他的位置
svg.append("g").attr("transform", "translate(" + padding.top + "," + padding.left + ")").attr("background", "skyblue");
資料,為方便學習,此處資料並未提出方法外
// 資料集
let data = [100,200,50,20,400,80];
//為x軸 y軸新增座標軸 該方法考慮抽出作為獨立api d3.scaleBand() 序數比例尺 .domain()輸入域 range() 輸出域
// d3.range(0, 10, 1) 返回一個算數級陣列 例如 [0,1,2,3.......9] (開始,結束,分度)
//此處為省略了 開始(0) 分度(1) 採取他們的預設值 (0,data.length,1) d3.range(data.length) data.length為終止數 注意 生成序列並不包括 data.length
// .rangeRound()設定比例尺的輸出範圍並四捨五入
// d3.scaleBand().domain(d3.range(data.length)).rangeRound([0,width-padding.left-padding.right])
// d3.scaleBand()比例尺的輸入域是 [0,1,2,...,data,length-1] 輸出域是 [0,500-20-20];
// scaleBand()序數比例尺 scaleLinear()線性比例尺
let xScale = d3.scaleBand()
.domain(d3.range(data.length)).rangeRound([0, width - padding.left - padding.right]);
// y軸輸入域 [0,400] 輸出域 [500-20-20,0]
let yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height - padding.top - padding.bottom, 0]);
// 座標軸
// .axisBottom(canshu) 建立向下的座標軸 引數是比例尺 axisLeft向左的座標軸
let xAxis = d3.axisBottom(xScale);
let yAxis = d3.axisLeft(yScale);
// 到這一步 柱狀圖的基本架子已經搭起來了,下面需要做的便是怎麼把資料呈現了
//將座標軸元件加入當前圖表分組
g.append("g")
.attr("transform", "translate(" + 0 + "," + (height - padding.top - padding.bottom) + ")")
.call(xAxis);
g.append("g")
.attr("transform", "translate(0,0)")
.call(yAxis);
下面一步便是將資料呈現,那麼我們就需要svg裡的各種標籤元件上手了。
//首先 為每一個數據(一個矩形)建立一個分組組g 這裡出現一個概念 enter() 這裡的意思是根據資料補全g
//本來g.selectAll(".rect") 是獲取不到東西的 但是 .data(data).enter().append("g")以後 data有多少資料,我就給他補全多少g
// 題外話:data()將資料繫結到選擇集上
let g_s = g.selectAll(".rect")
.data(data)
.enter()
.append("g");
// console.log("神奇的enter",g_s);// 為了效果更明顯 [g, g, g, g, g, g]
// 現在正主來了 為資料畫出一片天地 嘎嘎,就是矩形來著
//科普一下 svg的基礎哈
/*
svg 預定義形狀元素
矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path> 高大上 ,就是條線而已 可以設定開始和結束喲
<text> 元素用於定義文字。
rect 的屬性:
rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
style 屬性用來定義 CSS 屬性
CSS 的 fill 屬性定義矩形的填充顏色(rgb 值、顏色名或者十六進位制值)
CSS 的 stroke-width 屬性定義矩形邊框的寬度
CSS 的 stroke 屬性定義矩形邊框的顏色
x 屬性定義矩形的左側位置(例如,x="0" 定義矩形到瀏覽器視窗左側的距離是 0px) 在這裡呢就是座標軸的位置 咱自己的座標軸
y 屬性定義矩形的頂端位置(例如,y="0" 定義矩形到瀏覽器視窗頂端的距離是 0px)
CSS 的 fill-opacity 屬性定義填充顏色透明度(合法的範圍是:0 - 1)
CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度(合法的範圍是:0 - 1)
CSS 的 opacity 屬性定義整個元素的透明值(合法的範圍是:0 - 1)
*/
//這是每個矩形之間的距離
let rectPadding = 30;
g_s.append("rect")
.attr("x", function (d, i) {
// d 資料 單項資料 i 索引
return xScale(i) + rectPadding / 2;
// 這個意思還用我解釋嗎?還是解釋一下吧,嘎嘎,我一定是個好老師
// 每一個rect "x" 屬性的值 都等於 處於x軸的刻度的值(等差數列喔)加上 每個矩形之間的距離的一半喔
// xScale(i) 2 78 154 .. 然後第一個的x軸位置是多少呢 那當然是2啦 不過咱們得有間距 所以得加上間距 然後呢還得砍掉一半
// 別問我為什麼,揍你
})
.attr("y", function (d) {
return yScale(d);
// 參照上面 強調依據 x y 相對於我們自己的座標軸來的哈
})
.attr("width", function () {
//科普一下哈 xScale.step() 這個得到的是每一個等差刻度的寬喔 這裡是 76
//所以下面為什麼會這麼return 不用我再多說了吧
return xScale.step() - rectPadding;
})
.attr("height", function (d) {
console.log(d, yScale(400));
//這個呢,能看明白不 設定高 算了 為防止一些yt看不明白 小說一下
//總高度 - 上下空白 - yScale(d)(資料d時,y軸的輸出是多少)
//回顧y軸比例尺 [height - padding.top - padding.bottom, 0] 倒著來的喔
// 所以d越大,對應在y軸的值就越小 400 時 yScale(400)//0
//明白不,再不明白趴著讓我打屁屁就明白了 嘿嘿
return height - padding.top - padding.bottom - yScale(d);
})
.attr("fill", "skyblue");//這個呢就是矩形顏色的幹活 (最近看個抗日劇、那劇情......)
//最後 給每個矩形加上文字
/*
<text> 元素用於定義文字。
屬性:
主要屬性有:x,y,dx,dy,rotate,textLength,lengthAdjust
x,y表示文字的橫縱座標。
dx,dy表示移動的橫縱座標。
rotate表示旋轉的度數。
*/
//下面的運算不在解釋
g_s.append("text")
.attr("x", function (d, i) {
return xScale(i) + rectPadding / 2;
})
.attr("y", function (d) {
return yScale(d);
})
.attr("dx", function () {
(xScale.step() - rectPadding) / 2;
})
.attr("dy", 20)
.text(function (d) {
return d;
})
至此一個完整的柱狀圖就已經完成了,下篇文章就是圖示互動了,敬請期待。。。。。
相關推薦
D3.js 入門教程 基礎 詳細 一步步來
碼字不易—口水少來–有用請好評-打賞也行喔 為了初學者,本文儘量細緻再細緻,覺得太囉嗦的大牛繞過—-我膜拜您 需求:完整柱狀圖 備註:前奏選擇器、比例尺、座標軸等基礎知識不在贅敘,下面會有相關連結; 推薦連結:別個的教程 https://blog.csd
D3.js 入門學習(一)
min() 元素選擇器 eight 也會 127.0.0.1 暫時 網絡 doc 學習 一、安裝D3.js 1.網絡連接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安裝
Qt入門之基礎篇 ( 一 ) :Qt4及Qt5的下載與安裝
mingw ins 第3版 點擊 調試 但我 關系 構建 eas 轉載請註明出處:CN_Simo. 導語: Qt是一個跨平臺的C++圖形界面應用程序框架。它提供給開發者建立圖形用戶界面所需的功能,廣泛用於開發GUI程序,也可用於開發非GUI程序。Qt很容易擴展,並
asp.net core入門教程系列 (一)
home padding 方式 title sys 活性 elf tro ash Asp.Net Core簡介 ASP.NET Core 是一個全新的開源、跨平臺框架,可以用它來構建基於網絡連接的現代雲應用程序,比如:Web 應用,IoT(Internet Of Thin
前端框架React Js入門教程【精】
參考資料 react.js 功夫 入門實例 html 操作 load 通過 每一個 現在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS,ReactJs的虛擬DOM(Virtual DOM)和組件化的開發深深的吸引了我,下
【 D3.js 入門系列 --- 9.4 】 集群圖的制作
all users bject nodes -- 部分 函數 選擇 water 本人的個人博客為: www.ourd3js.com csdn博客為: blog.csdn.net/lzhlzz 轉載請註明出處,謝謝。
WPF入門教程系列十一——依賴屬性(一)
nts 如果 edev 出現 樣式 語法 寫法 屬性。 結構 一、依賴屬性基本介紹 本篇開始學習WPF的另一個重要內容依賴屬性。 大家都知道WPF帶來了很多新的特性,其中一個就是引入了一種新的屬性機制——依賴屬性。依賴屬性出現的目的是用來實現WPF中的樣式、自
11-移動端開發教程-zepto.js入門教程
container request net log 全局 鏈式 tag 優勢 實用 Zepto.js是一個輕量級的針對現代瀏覽器的JavaScript庫, 它與jquery有著類似的api。 如果你會用jquery,那麽你也會用zepto。 1. Why Zepto.js
WCF的入門教程dome(一)
基本上 logs 庫服務器 aid model bar urn borde tns 一、概述 Windows Communication Foundation(WCF)是由微軟發展的一組數據通信的應用程序開發接口,可以翻譯為Windows通訊接口,它是.NET框架的一
d3.js入門之DOM操作
我們 圖片 之前 () 匯總 vue file 分享圖片 dom操作 上篇成功在vue項目中把d3跑起來了,接下來對d3的基本操作做個匯總: 一、d3元素選擇器 d3.select(".skill"):選擇第一個類名為skill的元素並返回這個元素對象(實現鏈式語法)
d3.js入門學習
方法 如果 模式 圖形繪制 不失真 繪制 入門 理解 imp 個人感覺前端數據可視化是個趨勢,並且現在所在公司也是有做這塊的項目,雖然我目前還沒有接觸到公司數據可視化的項目,但是,今後總是要接觸的嘛。 今天看了一下公司目前所用的兩種數據可視化工具---D
Java EE入門教程系列(一)——第一章Java EE的概述(1)
題外話:這個系列是為了記錄學習Java EE的軌跡,也算是讀書筆記,是我先看完了一遍教程對相關概念有了一個大體印象以後準備再重頭細看一遍時同步寫的部落格。感想就是其實以前課堂上老師教的課都是很有作用的,如果你能很好地掌握設計模式、計算機網路的相關知識,那麼對你理解Java EE會有很大的幫助。可能是
D3.js 入門系列2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &
[轉]Chart.js入門教程
Chart.js是一個簡單、面向物件、為設計者和開發者準備的圖表繪製工具庫。 相信大部分人都一樣,看到一大筐用文字或者表格形式呈現的資料就頭疼。因為這種呈現方式也太無聊了吧。。。而且這對於我們處理原始資料也造成一定的困難。 不信?我反手就是一個例子: 更進一步說,柱狀圖能夠直觀
Spring Boot 初級入門教程(十一) —— 打分離 jar 包、部署和測試(附原始碼)
分離 jar 包,也就是把工程原始碼打包到 *.jar,而把工程依賴的所有 lib 單獨生成,這樣打包的好處是,在依賴包沒有修改的情況下,部署時只需要上傳一次依賴包,每次部署的專案 jar 包很小,在伺服器網路不太好的情況下,這樣做是非常有必要的,因為上傳 20M 和 上傳 20K 的時間還是有
Redis入門教程-超詳細
目錄 【redis是什麼】 redis是一個開源的、使用C語言編寫的、支援網路互動的、可基於記憶體也可持久化的Key-Value資料庫。 redi
linux-CentOS7 下的 Docker最新入門教程 超級詳細 (安裝以及簡單的使用)
1、為什麼使用Docker(本人) 最近總是頻繁的在新伺服器釋出專案, 每次釋出都需要佈置專案所需要的環境特別麻煩,而且還有一臺機器需要兩個環境的狀況 例如:釋出java web 專案而言 需要下載安裝jdk 和tomcat 安裝Docker後只需要幾個命令就輕鬆搞定,
github 教程 超級詳細一看就懂
這篇文章是我自己寫的關於GitHub的內容,從我剛聽到這個直到設定成功每一步都有詳細的步驟來解釋,其中有一些截圖或者程式碼來自於網上。 首先,我先對GitHub來一個簡單的介紹,GitHub有一個很強大的功能就是,你在伺服器上邊可以建立一個庫(稍後會介紹怎麼建
Nuxt.js入門教程(Vue SSR架構)-介紹&安裝
個人部落格 地址:http://www.wenhaofan.com/article/20181210124818 介紹 如果你使用過Vue,那麼就知道使用Vue構建一個單頁應用是非常簡單快捷的。而什麼是單頁應用呢,單頁應用 即SPA(全稱為:single page web applicat
【d3.js實踐教程特別篇】PornHub釋出基於d3的網民觀看成人視訊時長分佈互動式地圖
學習d3.js(以下都簡稱d3)也有一段時間了,執行d3做了幾個專案。我發現中文的d3教程很少,國外資料多但要求有一定的英文閱讀能力(推薦網址:http://bl.ocks.org/mbostock),於是就萌發了寫一個d3實際運用系列文章的想法,現在開始付之行動。在系列