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