資訊專欄INFORMATION COLUMN
摘要：入門，根據(jù)官網(wǎng)部分教程學(xué)習(xí)，發(fā)現(xiàn)因?yàn)榘姹靖?，有些和概念可能不適用，但總體思想未變。
入門d3.js，根據(jù)官網(wǎng)部分教程學(xué)習(xí)，發(fā)現(xiàn)因?yàn)榘姹靖?，有些api和概念可能不適用，但總體思想未變。本文思路跟隨此篇blogLet’s Make a Bar Chart學(xué)習(xí)，加上自己的理解，并且查閱了部分更新資料
元素選擇d3通過(guò)d3.select()或者d3.selectAll()獲取元素，這兩個(gè)API返回selection對(duì)象，我們可以通過(guò)selection對(duì)象操控元素
通過(guò)selection操作dom有一個(gè)好處是可以不用寫太多的for循環(huán)，比如我想給所有的chart DIV添加內(nèi)容只需
let section = d3.selectAll(".chart");
let div = section.append("div");
div.html("Hi!")
就可以向所有的div加入內(nèi)容，無(wú)需for循環(huán)
鏈?zhǔn)綄懛?/b>selection的另一個(gè)方便之處就是鏈?zhǔn)綄懛?，selection的方法會(huì)返回對(duì)應(yīng)selection，這樣就可以使用簡(jiǎn)潔的鏈?zhǔn)綄懛?/p>
d3.selectAll(".chart")
.append("div")
.html("Hi")
使用html與d3創(chuàng)建條形圖
首先列出css與data，下面都用這一配置
.chart div{
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
const data = [4, 8, 15, 16, 23, 42];
接下來(lái)使用d3創(chuàng)建條形圖
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", d => d * 10 + "px")
.text( d => d)
接下來(lái)分步說(shuō)明，其中會(huì)涉及到一個(gè)叫data join（數(shù)據(jù)綁定）的概念。有了data join，當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，可以通過(guò)數(shù)據(jù)創(chuàng)建，更新，銷毀元素，后文再提及
首先獲取元素并初始化要綁定數(shù)據(jù)的元素
let chart = d3.select(".chart")//選擇元素
let bar = chart.selectAll("div") //要進(jìn)行數(shù)據(jù)綁定的元素，chart中無(wú)此元素，此時(shí)返回的selection為空
接著綁定數(shù)據(jù)
let barUpdate = bar.data(data)
console.log(barUpdate)
selection.data()方法會(huì)將數(shù)據(jù)綁定于選擇的元素之中，并返回一個(gè)代表update的新的selection，并且在其中定義了enter selections和exit selections
（這部分用文字難以一言兩語(yǔ)解釋清楚，于是寫在另一篇blog里
_groups（這里是代表update的selection）:表示成功綁定上數(shù)據(jù)的元素，若無(wú)對(duì)應(yīng)元素，則由empty表示，所以這里有6個(gè)empty
enter selections：表示有數(shù)據(jù)無(wú)元素，對(duì)應(yīng)元素用EnterNode替代，若對(duì)應(yīng)數(shù)據(jù)有元素，則由empty表示
exit selections: 表示無(wú)數(shù)據(jù)有元素，因?yàn)閏hart中沒(méi)有元素，所以這里的數(shù)組為空；若有數(shù)據(jù)對(duì)應(yīng)元素，元素也用empty表示，無(wú)則用元素本身表示
接下來(lái)我們獲取所有EnterNode，對(duì)其插入div
let barEnter = barUpdate.enter().append("div"); //enter()返回EnterNode
接著對(duì)這些div設(shè)置條形寬度，因?yàn)橛衐ata join（數(shù)據(jù)綁定），所以我們直接通過(guò)綁定的數(shù)據(jù)設(shè)置寬度就可以了
barEnter.style("width", d => d * 10 + "px");
最后，text文字設(shè)置同理
barEnter.text(d => d);使用比例尺
上面的例子中我們使用了magic number => 10，讓bar的像素寬度=數(shù)值*10，使得bar的寬度看起來(lái)容易對(duì)比，但是正常情況下使用magic number會(huì)很麻煩且不易調(diào)試，而且不僅有放大像素?cái)?shù)值的情況，也有縮小像素?cái)?shù)值的情況，所以引入了比例尺
這里使用線性比例尺
let x = d3.scaleLinear()
.domain([0, d3.max(data)]) //輸入域
.range([0, 420]); //輸出域，這里可理解為柱形圖最大長(zhǎng)度
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", d => x(d) + "px") //使用比例尺，比例尺是個(gè)函數(shù)
.text( d => d);
總結(jié)
初步入門，有不對(duì)請(qǐng)大佬指出
參考資料Let’s Make a Bar Chart I
selection.data()
selection.enter()
selection.exit()
selection.join()
[譯]D3.js 之 d3-selection 原理
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102875.html
摘要：它的全稱是數(shù)據(jù)驅(qū)動(dòng)文檔，并且它被稱為一個(gè)互動(dòng)和動(dòng)態(tài)的數(shù)據(jù)可視化庫(kù)網(wǎng)絡(luò)。我們將使用文本編輯器和瀏覽器。出于測(cè)試目的，建議使用工具來(lái)檢查和調(diào)試和，例如或。使矩形反映數(shù)據(jù)目前，我們陣列中的所有矩形沿軸具有相同的位置，并且不代表高度方面的數(shù)據(jù)。 歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由獨(dú)木橋先生 發(fā)表于云+社區(qū)專欄 介紹 D3.js是一個(gè)JavaScript庫(kù)。它的...
摘要：在本教程中，我們將探討如何使用和構(gòu)建實(shí)時(shí)圖形。通過(guò)方法監(jiān)聽(tīng)輪詢更新，并在收到更新后使用最新數(shù)據(jù)調(diào)用函數(shù)，以便重新呈現(xiàn)圖形。 首先你需要在計(jì)算機(jī)上安裝Node和npm。 數(shù)據(jù)的可視化表示是傳遞復(fù)雜信息的最有效手段之一，D3.js提供了創(chuàng)建這些數(shù)據(jù)可視化的強(qiáng)大工具和靈活性。 D3.js是一個(gè)JavaScript庫(kù)，用于使用SVG，HTML和CSS在Web瀏覽器中生成動(dòng)態(tài)的交互式數(shù)據(jù)可視化。...
摘要：在本教程中，我們將探討如何使用和構(gòu)建實(shí)時(shí)圖形。通過(guò)方法監(jiān)聽(tīng)輪詢更新，并在收到更新后使用最新數(shù)據(jù)調(diào)用函數(shù)，以便重新呈現(xiàn)圖形。 首先你需要在計(jì)算機(jī)上安裝Node和npm。 數(shù)據(jù)的可視化表示是傳遞復(fù)雜信息的最有效手段之一，D3.js提供了創(chuàng)建這些數(shù)據(jù)可視化的強(qiáng)大工具和靈活性。 D3.js是一個(gè)JavaScript庫(kù)，用于使用SVG，HTML和CSS在Web瀏覽器中生成動(dòng)態(tài)的交互式數(shù)據(jù)可視化。...
摘要：數(shù)據(jù)可視化庫(kù)超過(guò)的的可能是最流行和最廣泛的數(shù)據(jù)可視化庫(kù)。是一組組件，用于高效地渲染大型列表和表格數(shù)據(jù)。一種優(yōu)雅而靈活的方式，可以利用組件來(lái)支持實(shí)際的數(shù)據(jù)可視化。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ React Native 組件庫(kù) 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...
閱讀 2799·2021-09-01 10:30
閱讀 1690·2019-08-30 15:52
閱讀 978·2019-08-29 18:40
閱讀 1134·2019-08-28 18:30
閱讀 2405·2019-08-23 17:19
閱讀 1333·2019-08-23 16:25
閱讀 2711·2019-08-23 16:18
閱讀 2988·2019-08-23 13:53
