d3數(shù)據(jù)綁定與selection實踐

Tangpj 發(fā)布于2019-08-26 13:38 / 2064人閱讀

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

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

簡要

d3.js通過data join（數(shù)據(jù)綁定）創(chuàng)建，更新及銷毀元素，如何操作元素則是通過selection?？偨Y如下

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

接下來用實驗進一步說明區(qū)別吧

實驗

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

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

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

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

初始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下子元素少于數(shù)據(jù)（其實和上一種差不多，但為了方便觀察列出來）

chart下子元素數(shù)量等于數(shù)據(jù)

chart下子元素數(shù)量多于數(shù)據(jù)

chart下無子元素

數(shù)據(jù)及JS代碼如下

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

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

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

enter：有數(shù)據(jù)，無元素

exit：無數(shù)據(jù)，有元素

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

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

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

chart下子元素少于數(shù)據(jù)

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有數(shù)據(jù)綁定，故enter的第一個元素用empty表示，三個數(shù)據(jù)剩下兩個用EnterNode表示

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

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

chart下子元素數(shù)量等于數(shù)據(jù)

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下子元素數(shù)量多于數(shù)據(jù)

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下多了最后一個未綁定數(shù)據(jù)的元素，即對應圖片中的最后一個元素
可通過selection.exit()對其進行操作

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

exitSelection.remove();

selection.join()簡化操作

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

子元素少于數(shù)據(jù)或無子元素

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

子元素多于數(shù)據(jù)

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

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

data join意義 1.有利于動態(tài)數(shù)據(jù)的可視化編程

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

2.編程更偏向聲明式

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

3.方便添加動畫效果

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

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)和函數(shù)式編程(Functional)
selection.data()
selection.enter()
selection.exit()
selection.join()

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

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

D3js之入門

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

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

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

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

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

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

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

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

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

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