摘要:通過函數可以選擇出沒有關聯任何數據的圖形,可以調用相關函數更新或是刪除。
D3.js入門
</>復制代碼
1.什么是D3.js?
Data-Driver-Document(數據驅動文檔):是一個用來使用Web標準做數據可視化的js庫;
數據可視化:用交互的/可視化的方式對抽象數據進行展示,已達到數據認知的目的,數據是純粹的的事實,純粹意味著這種事實沒有經過任何處理,而信息是數據處理后的結果,他揭示了數據的意義;
優勢:比Processing這樣的底層繪圖簡單,比Echarts這樣的高度封裝的圖表更自由,也就是說d3.js為我們提供了一個不是特別底層,也不是高度封裝的庫,能夠給使用者很好地發揮空間,同時學習成本也沒有那么大。
</>復制代碼
2.D3的數據與圖形
理解enter-updte-exit(進入-更新-退出)模式
enter(進入)
</>復制代碼
A:代表數據集合,就是需要可視化的數據;
B:代表圖形元素的集合,就是展示出的圖形;
如上圖所示,集合A中的陰影區部分表示了未被可視化的數據,enter操作的意義在于通過enter()函數返回一個集合,
這個集合里面包含的就是沒有被可是可視化的數據;這也就是我們數據化的第一部分
操作,找到那些沒有被可視化的數據;
update(更新)
</>復制代碼
如上圖所示,陰影區域表示圖像和數據集合的交集,也就是當前數據所對應的圖形,通過data函數,可以選擇出交集集合,然后對選擇出的集合進行操作,對元素進行更新;
exit(退出)
圖中的陰影表示沒有關聯任何數據的圖形,為什么會有沒有數據的圖形,一般而言是從
數據中刪除了數據產生的。通過exit函數可以選擇出沒有關聯任何數據的圖形,可以調
用相關函數更新或是刪除。
</>復制代碼
3.實例
柱狀圖
</>復制代碼
var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8];
//定義數據,定義集合A
function render(data) { //render函數來更新圖表
// Enter
d3.select("body").selectAll("div.h-bar")
//選中body,選中類名為h-bar的div,其實此時頁面上沒有這些元素,選擇出圖形元素的集合
.data(data) // data函數將數組綁定到將要創建的圖形元素上
.enter() // enter函數選擇沒有被可視化的數據元素,render第一次調用的時候,沒有數據被可視化,所以選中的是所有的數據
.append("div") // 為每一個數據創建一個div,這里d3為響應的div添加了__data__屬性,這個屬性的值為綁定的數據值;
.attr("class", "h-bar")//類名設置為h-bar
.append("span"); //每個div中添加一個span
// Update
d3.select("body").selectAll("div.h-bar")
.data(data) //定義圖形集合和數據集合,更新模式下,data()函數返回數據集合和圖形集合的交集
.style("width", function (d) { // 在和數據關聯的圖形更改屬性,所有的d3修飾函數都可以使用這樣的函數來修改圖形元素的屬性,這個函數有一個形參,d代表與對應圖形元素關聯的數據值
return (d * 3) + "px";
})
.select("span") // 子元素能拿到父級元素的值
.text(function (d) {
return d;
});
// Exit
d3.select("body").selectAll("div.h-bar")
.data(data)
.exit() //得到沒有任何數據關聯的圖形元素
.remove();//移除這些元素
}
setInterval(function () {
data.shift();
data.push(Math.round(Math.random() * 100));
render(data);
}, 1500);
render(data);
參考文獻:《D3.js數據可視化實戰手冊》
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82849.html
摘要:入門,根據官網部分教程學習,發現因為版本更新,有些和概念可能不適用,但總體思想未變。 入門d3.js,根據官網部分教程學習,發現因為版本更新,有些api和概念可能不適用,但總體思想未變。本文思路跟隨此篇blogLet’s Make a Bar Chart學習,加上自己的理解,并且查閱了部分更新資料 元素選擇 d3通過d3.select()或者d3.selectAll()獲取元素,這兩個...
摘要:安裝就是一個的庫,不需要安裝,可下載文件或直接引用網絡鏈接。示例選擇集,與原生中的用法類似,返回匹配的第一項,返回匹配的所有項。 安裝 d3.js就是一個js的庫,不需要安裝,可下載文件或直接引用網絡鏈接。 示例 first psecond pthird p 選擇集 select(),selectAll() 與原生js中的querySelector querySelectorAll...
摘要:小弟在前端摸爬滾打一段時間,發現前端的比較好的文檔比較分散,特別是中文的,我平時都是收藏在瀏覽器里,以后有好的教程和綜合性的文檔我會更新到這里。小組中文文檔,很全。 小弟在前端摸爬滾打一段時間,發現前端的比較好的文檔比較分散,特別是中文的,我平時都是ctrl+D收藏在瀏覽器里,以后有好的教程和綜合性的文檔我會更新到這里。一則可以做個記錄,防止丟失。二則有需要的朋友可以來我這里找一找。 ...
摘要:本片記錄坐標軸入門,使用版本如何實現坐標軸生成的坐標圖是通過的路徑元素元素組成的,如下圖表示的是底部坐標軸不包括內部刻度,如下這部分通過描繪,在中稱為容器則包括了和作為即線,即文字實現坐標軸主要步驟步驟主要如下創建比例尺創建坐標軸,是個函數 本片blog記錄d3坐標軸入門,使用版本v5.9.2 SVG如何實現坐標軸 d3生成的坐標圖是通過svg的path(路徑)元素 + g + lin...
摘要:使用創建動態圖表主要使用到了部分的,通過他們可以完成動畫我的學習記錄是通過一個例子了解這些會動的柱狀圖還是拿之前的例子,代碼在此完整的柱圖修改的代碼部分在于創建處原來的代碼加上動畫效果后代碼如下動畫開始前狀態返回持續時間,是的動畫函數, d3js v5.9.2 使用d3創建動態圖表主要使用到了d3.trasition部分的API,通過他們可以完成動畫 我的學習記錄是通過一個例子了解...
閱讀 966·2021-11-24 09:39
閱讀 3393·2021-10-27 14:20
閱讀 2325·2019-08-30 14:08
閱讀 3367·2019-08-29 16:34
閱讀 2181·2019-08-26 12:14
閱讀 2108·2019-08-26 11:54
閱讀 2778·2019-08-26 11:44
閱讀 2479·2019-08-26 11:38