d3數據綁定與selection實踐

Tangpj 發布于2019-08-26 13:38 / 2047人閱讀

摘要：本篇的使用的版本為將按照簡要介紹實驗及意義進行簡要通過數據綁定創建，更新及銷毀元素，如何操作元素則是通過。

本篇blog的使用的d3版本為d3.js v5.9.2
將按照簡要介紹、實驗及意義進行

簡要

d3.js通過data join（數據綁定）創建，更新及銷毀元素，如何操作元素則是通過selection。總結如下

其中，selection的三種狀態就將data與elements結合在一起，進行對元素的控制
他們之前的關系如圖所示（圖片來源：Thinking with Joins）

接下來用實驗進一步說明區別吧

實驗

主要會用到以下幾個API：
selection.data()：返回代表update的selection，同時定義enter selection和exit selection，update按上圖理解表示又有數據又有元素

selection.enter()：返回enter selection，enter中文為“進入”，我理解為有數據但無元素，可以進入圖表

selection.exit()：返回exit selection，exit中文為“退出”，我理解為無數據綁定的元素，可以退出圖表

selection.join()：對已綁定數據的元素做插入，移除多余，更新數據，可以簡化操作

初始HTML及CSS

HTML如下

CSS如下

.chart div{
    font: 10px sans-serif;
    background-color: steelblue;
    text-align: right;
    padding: 3px;
    margin: 1px;
    color: white;
}

接下來以四種情況熟悉enter，update與exit：

chart下無子元素

chart下子元素少于數據（其實和上一種差不多，但為了方便觀察列出來）

chart下子元素數量等于數據

chart下子元素數量多于數據

chart下無子元素

數據及JS代碼如下

const data = [10,55,33];
let selection = d3.select(".chart")
    .selectAll("div")
    .data(data);
console.log(selection);

（注意這里每一個selection是一個數組對象，每一個元素為一個數組）

_groups：這里是代表update的selection，既有數據，又有元素；無元素的數據則用empty表示

enter：有數據，無元素

exit：無數據，有元素

對于enter，可通過selection.enter()進行操作

let enterSelection = selection.enter();
console.log(enterSelection);

enterSelection.append("div")
    .style("width", d => d * 10 + "px")
    .text(d => d);

chart下子元素少于數據

const data = [10,55,33];
let selection = d3.select(".chart")
    .selectAll("div")
    .data(data);
    // .style("width", d => d * 10 + "px") //注釋去掉就會設置第一個div的width
    // .text(d => d);
console.log(selection);

let enterSelection = selection.enter();
console.log(enterSelection);

enterSelection.append("div")
    .style("width", d => d * 10 + "px")
    .text(d => d);

console.log(selection)顯示如下：

enter：.chart下有一個div，且這個div有數據綁定，故enter的第一個元素用empty表示，三個數據剩下兩個用EnterNode表示

exit：.chart下有一個div，但他有數據綁定，所以exit中這個div用一個empty表示

_groups（這里表示update selection）：.chart下的有一個div并且綁定上了數據，剩余兩個數據沒有元素綁定，故用empty表示

chart下子元素數量等于數據

const data = [10,55,33];
let selection = d3.select(".chart")
    .selectAll("div")
    .data(data);
    // .style("width", d => d * 10 + "px")
    // .text(d => d);
console.log(selection);

道理同上

chart下子元素數量多于數據

const data = [10,55,33];
let selection = d3.select(".chart")
    .selectAll("div")
    .data(data);
    // .style("width", d => d * 10 + "px")
    // .text(d => d);
console.log(selection);

可見exit下多了最后一個未綁定數據的元素，即對應圖片中的最后一個元素
可通過selection.exit()對其進行操作

let exitSelection = selection.exit();
console.log(exitSelection);

exitSelection.remove();

selection.join()簡化操作

之前無論是對enter，exit以及update的操作可能都需要通過selection.enter()及selection.exit()等API獲取selection，使用selection.join()可以極大地簡化操作，同時局部渲染提高了效率
以下根據之前的例子簡單舉例

子元素少于數據或無子元素

let selection = d3.select(".chart")
    .selectAll("div")
    .data(data).join("div")
    .style("width", d => d * 10 + "px")
    .text(d => d);

子元素多于數據

let selection = d3.select(".chart")
    .selectAll("div")
    .data(data).join("div")
    .style("width", d => d * 10 + "px")
    .text(d => d);

js是同樣的代碼，同時把多余的元素刪去了

data join意義 1.有利于動態數據的可視化編程

以上僅僅只是靜態數據，但我們可以擴展到動態的數據，如data數組元素增加或減少，三種狀態使得我們便于操作數據，僅僅只需使用selection.join()或者selection.remove()等等

2.編程更偏向聲明式

當數據大小改變，或數據量增多減少時，不需要使用if或者for等語法。update，enter及exit三種狀態結合API使得語法簡練，大幅度提升編程效率

3.方便添加動畫效果

其實意義同第一條很相像，三種狀態可以方便我們對進入圖表或退出圖表的元素創建動畫，例子如下

const data = [10,55,33];
const t = d3.transition()//定義動畫變換
    .duration(500)
    .ease(d3.easeLinear);
    
let selection = d3.select(".chart")
    .selectAll("div")
    .data(data).join("div").style("width", 0).
    transition(t) //使用動畫變換
    .style("width", d => d * 10 + "px")
    .text(d => d);

這樣就會有動畫效果了

總結

解決了一直好奇的問題，初步入門，有不對或建議請大佬指正

參考資料

Thinking with Joins
編程范式：命令式編程(Imperative)、聲明式編程(Declarative)和函數式編程(Functional)
selection.data()
selection.enter()
selection.exit()
selection.join()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109224.html

D3js之入門

摘要：子選集直接通過返回，和子選集分別通過和返回。截止上面也并不是非得用不可，就是一些插入操作，原生也是可以實現的。相對于echart, highchart等其他圖表庫算是一個比較底層的可視化工具，簡單來講他不提供任何一種現成的圖表，所有的圖表都是我們在它的庫里挑選合適的方法構建而成。基于上面的理解，d3無疑會復雜很多但是也強大自由的多，另外因為d3基于svg所以修改圖表的樣式和結構也會...

guqiu 2019-08-22 16:13 評論0 收藏0
d3.js入門——selection與創建條形圖

摘要：入門，根據官網部分教程學習，發現因為版本更新，有些和概念可能不適用，但總體思想未變。入門d3.js，根據官網部分教程學習，發現因為版本更新，有些api和概念可能不適用，但總體思想未變。本文思路跟隨此篇blogLet’s Make a Bar Chart學習，加上自己的理解，并且查閱了部分更新資料元素選擇 d3通過d3.select()或者d3.selectAll()獲取元素，這兩個...

yanbingyun1990 2019-08-23 16:18 評論0 收藏0
D3 源代碼解析（二）

摘要：第一節點位于第二節點內。例如，返回意味著在在內部，并且在之前。這個函數返回一個函數，返回的函數綁定了當前對象并執行。這是繼上一篇D3源碼解構文章后的對D3的研究筆記，筆者的能力有限，如有哪里理解錯誤，歡迎指正。對集合的操作關于d3.attr 一個可以處理很多情況的函數，當只傳入一個參數時，如果是string，則返回該屬性值，如果是對象，則遍歷設置對象的鍵值對屬性值，如果參數大于等...

tainzhi 2019-08-22 10:34 評論0 收藏0
交互式數據可視化－D3.js（二）選擇集和數據

摘要：相關的函數有兩個和的工作過程的方法很簡單，使用的也比較少。的工作過程能將數據各項分別綁定到選擇的元素集上。當數組長度與元素數量不一致時，同樣能夠處理。多出的元素在最后。選擇集 select和selectAll類似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

leanote 2019-08-02 11:54 評論0 收藏0
交互式數據可視化－D3.js（二）選擇集和數據

摘要：相關的函數有兩個和的工作過程的方法很簡單，使用的也比較少。的工作過程能將數據各項分別綁定到選擇的元素集上。當數組長度與元素數量不一致時，同樣能夠處理。多出的元素在最后。選擇集 select和selectAll類似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

褰辯話 2019-08-23 12:42 評論0 收藏0