資訊專欄INFORMATION COLUMN
摘要：以的方式來思考聲明原文鏈接來自作者譯文地址如果覺得還不錯不妨去給個打個比方你想用畫一個散點圖用每一個的元素來可視化你的數據你會驚訝的發現居然沒有直接創建多個元素的方法怎么回事當然有方法你可以用來創建單個元素比如但這只是一個圓如果你想要創建很
以 Join 的方式來思考D3.js 聲明
原文鏈接: 來自 D3作者 Mike Bostock https://bost.ocks.org/mike/join/
譯文地址: github repository
如果覺得還不錯, 不妨去github給個star ?
Content打個比方, 你想用D3畫一個 散點圖 , 用每一個svg的circle元素來可視化你的數據. 你會驚訝的發現: D3居然沒有直接創建多個DOM元素的方法! 怎么回事?
當然, D3有 append 方法, 你可以用來創建單個元素. 比如:
svg.append("circle")
.attr("cx", d.x)
.attr("cy", d.y)
.attr("r", 2.5);
但這只是一個圓, 如果你想要創建很多個圓(每一個圓代表一個數據點). 你可能會想到用一個for循環來實現 ? 這是非常直觀的想法, 這個想法并沒有什么錯, 但是在這之前不妨看看D3中是如何實現創建多個元素的:
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 2.5);
上面這段代碼完美的實現了你想要的效果: 為每一個數據點創建了一個 circle, 用數據點的 x 和 y 屬性作為circle的坐標. 但這段代碼里面的 selectAll("circle") 是什么意思? 我們為什么要 select 我們知道當前并不存在的 circle, 還用這個方法的返回值去創建新的元素?
這段代碼的思想是: 不要告訴D3如何去做, 而是告訴D3你想要的效果. 你想要circle元素和數據一一對應, 那么你就不應該告訴D3去創建circle元素, 而是告訴D3: .selectAll("circle") 得到的circle集合應該和 .data(data) 一一對應. 這個思想就叫做 Join.
從上圖中可以看到:
數據集合 和 DOM元素集合 相交產生了中間的 update 集合
沒有DOM元素與之對應的Data產生了左邊的 enter 集合 (也就是缺失DOM元素)
同樣的, 所有沒有數據與之對應的DOM元素產生了右邊的 exit 集合 (也就意味著這些DOM元素將被移除)
現在我們可以再來看看上面那段使用 enter-append 模型的代碼了:
首先, svg.selectAll("circle") 返回的是一個空的集合, 因為當前 svg 容器還是空的. 這里的 svg 是所有后續創建的 circle元素的父節點.
svg.selectAll("circle") 返回的集合接下來和 data 進行 Join 操作, 得到的就是我們上面提到的三個集合: update 集合 , enter 集合 , exit 集合. 因為初始時 Elements集合(也就是circle集合)是空的, 所以 update 和 exit 集合為空, 而 enter 集合會自動為每一個新的data元素生成一個占位符.
默認 .data(data) 返回的是 update 集合, 因為 update 集合為空, 所以我們不對其進行操作, 這里我們調用 .enter() 得到 enter 集合.
接下來, 對于 enter 集合中的每一個元素, 我們使用 selection.append("circle") (值得注意的是, 對集合的操作會被應用到集合中的每一個元素上去). 這樣就為每一個數據點創建了一個 circle (這些circle都在他們的父節點 svg 中)
用 Join 的方式來思考意味著, 我們要做的事情僅僅是聲明 DOM集合(比如這里的 circle 集合) 和數據集合之間的關系, 并且通過處理三個不同狀態的集合 enter, update , exit 來描述這種關系.
你也許會問, 為什么要用這種方式來進行我的數據可視化工作呢? 好處在哪? 為什么我不直接用for循環創建所有我想要的元素? 答案是這個思想確實是非常有好處的, 它的優美之處在于它的概括性. 現在我們的代碼還只是處理了 enter 的部分, 這部分對于展示靜態的數據已經足夠了, 但如果你想進行動態的數據展示, 這種 Join 的方式將大大簡化你的工作, 你只需要對 update 和 exit 進行很少的操作就能得到你想要的效果. 這也意味著你可以輕松的展示實時數據, 能夠為用戶添加動態的交互, 能平滑的切換不同的展示數據集.
下面這段代碼展示了對于 exit 和 update 集合的處理:
var circle = svg.selectAll("circle")
.data(data);
circle.exit().remove();
circle.enter().append("circle")
.attr("r", 2.5)
.merge(circle)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
無論什么時候上面的這段代碼被執行, 它都將重新計算 Join 并且維護好 DOM元素集合 和 數據集合 之間的對應關系. 如果你的新數據集比之前老的數據集要小, 多余的DOM元素就會進入 exit 集合, 然后被 remove掉. 如果新的數據集比老的大, 那么新的數據就將進入 enter 集合, 并創建出新的DOM元素. 如果新的數據集和老的數目相同, 那么只有 update 集合會被更新坐標.
使用 Join 的思想能讓我們的代碼更加直觀. 你只需要處理好這三種狀態的集合, 而不需要 if 和 for 來進行復雜的邏輯判斷. 你只需要描述好你的數據集合和DOM集合想要有怎樣的對應關系.
Join 還讓你可以對不同狀態的DOM元素進行不同的操作. 比如, 你可以只對 enter 集合進行操作, 這樣就不會每次都對所有的 DOM元素進行更新, 這能顯著的提升你的數據可視化作品的渲染效率.
同樣的, 你也可以給指定集合的元素添加動畫效果, 比如給 enter 的元素添加放大進入的效果:
circle.enter().append("circle")
.attr("r", 0)
.transition()
.attr("r", 2.5);
或者給 exit 的集合添加 縮小隱藏 的效果:
circle.exit().transition()
.attr("r", 0)
.remove();
譯者注:
這里有一個非常好的實踐 Join 思想的例子(同樣來自D3作者), 不妨看看:
Mike Bostock 的實現
這里是我對這個例子的實現(也包括一些其他的案例):在線演示
源代碼
想繼續了解 D3.js這里是我的 D3.js 、 數據可視化 的github 地址, 歡迎 start & fork
D3-blog
如果覺得不錯的話, 不妨點擊下面的鏈接關注一下 : )github主頁
知乎專欄
掘金
想直接聯系我 ?郵箱: ssthouse@163.com
微信:
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95410.html
摘要：本篇的使用的版本為將按照簡要介紹實驗及意義進行簡要通過數據綁定創建，更新及銷毀元素，如何操作元素則是通過。 本篇blog的使用的d3版本為d3.js v5.9.2 將按照簡要介紹、實驗及意義進行 簡要 d3.js通過data join（數據綁定）創建，更新及銷毀元素，如何操作元素則是通過selection。總結如下 showImg(https://segmentfault.com/...
摘要：入門，根據官網部分教程學習，發現因為版本更新，有些和概念可能不適用，但總體思想未變。 入門d3.js，根據官網部分教程學習，發現因為版本更新，有些api和概念可能不適用，但總體思想未變。本文思路跟隨此篇blogLet’s Make a Bar Chart學習，加上自己的理解，并且查閱了部分更新資料 元素選擇 d3通過d3.select()或者d3.selectAll()獲取元素，這兩個...
摘要：數據可視化圖表圖表作為數據可視化最常見的表現形式之一，往往被以偏概全的認為圖表就是數據可視化。嚴格來說，數據可視化應該是連接數據與視覺的一個映射關系，將數據映射成人更容易感知其規律的可視化結果。 題目中的新一代是個相對的概念，事實上本文即將介紹的方法已經有了生產環境可用的實現方案（這也側面佐證了其可行性），但考慮到此方法與現在大部分前端項目中所使用的數據可視化方案相比仍有一些優勢，因此...
摘要：它的全稱是數據驅動文檔，并且它被稱為一個互動和動態的數據可視化庫網絡。我們將使用文本編輯器和瀏覽器。出于測試目的，建議使用工具來檢查和調試和，例如或。使矩形反映數據目前，我們陣列中的所有矩形沿軸具有相同的位置，并且不代表高度方面的數據。 歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由獨木橋先生 發表于云+社區專欄 介紹 D3.js是一個JavaScript庫。它的...
摘要：在本教程中，我們將探討如何使用和構建實時圖形。通過方法監聽輪詢更新，并在收到更新后使用最新數據調用函數，以便重新呈現圖形。 首先你需要在計算機上安裝Node和npm。 數據的可視化表示是傳遞復雜信息的最有效手段之一，D3.js提供了創建這些數據可視化的強大工具和靈活性。 D3.js是一個JavaScript庫，用于使用SVG，HTML和CSS在Web瀏覽器中生成動態的交互式數據可視化。...
閱讀 2577·2019-08-30 10:53
閱讀 3183·2019-08-29 16:20
閱讀 2933·2019-08-29 15:35
閱讀 1751·2019-08-29 12:24
閱讀 2865·2019-08-28 18:19
閱讀 1838·2019-08-23 18:07
閱讀 2314·2019-08-23 15:31
閱讀 1158·2019-08-23 14:05
