d3.js入門——selection與創建條形圖

yanbingyun1990 發布于2019-08-23 16:18 / 2713人閱讀

摘要：入門，根據官網部分教程學習，發現因為版本更新，有些和概念可能不適用，但總體思想未變。

入門d3.js，根據官網部分教程學習，發現因為版本更新，有些api和概念可能不適用，但總體思想未變。本文思路跟隨此篇blogLet’s Make a Bar Chart學習，加上自己的理解，并且查閱了部分更新資料

元素選擇

d3通過d3.select()或者d3.selectAll()獲取元素，這兩個API返回selection對象，我們可以通過selection對象操控元素

通過selection操作dom有一個好處是可以不用寫太多的for循環，比如我想給所有的chart DIV添加內容只需

let section = d3.selectAll(".chart");
let div = section.append("div");
div.html("Hi!")

就可以向所有的div加入內容，無需for循環

鏈式寫法

selection的另一個方便之處就是鏈式寫法，selection的方法會返回對應selection，這樣就可以使用簡潔的鏈式寫法了

d3.selectAll(".chart")
  .append("div")
  .html("Hi")

使用html與d3創建條形圖

首先列出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創建條形圖

    d3.select(".chart")
        .selectAll("div")
        .data(data)
        .enter().append("div")
        .style("width",  d => d * 10 + "px")
        .text( d => d)

接下來分步說明，其中會涉及到一個叫data join（數據綁定）的概念。有了data join，當數據發生改變時，可以通過數據創建，更新，銷毀元素，后文再提及
首先獲取元素并初始化要綁定數據的元素

    let chart = d3.select(".chart")//選擇元素
    let bar = chart.selectAll("div") //要進行數據綁定的元素，chart中無此元素，此時返回的selection為空

接著綁定數據

    let barUpdate = bar.data(data)
    console.log(barUpdate)

selection.data()方法會將數據綁定于選擇的元素之中，并返回一個代表update的新的selection，并且在其中定義了enter selections和exit selections

（這部分用文字難以一言兩語解釋清楚，于是寫在另一篇blog里

_groups（這里是代表update的selection）:表示成功綁定上數據的元素，若無對應元素，則由empty表示，所以這里有6個empty

enter selections：表示有數據無元素，對應元素用EnterNode替代，若對應數據有元素，則由empty表示

exit selections: 表示無數據有元素，因為chart中沒有元素，所以這里的數組為空；若有數據對應元素，元素也用empty表示，無則用元素本身表示

接下來我們獲取所有EnterNode，對其插入div

    let barEnter = barUpdate.enter().append("div"); //enter()返回EnterNode

接著對這些div設置條形寬度，因為有data join（數據綁定），所以我們直接通過綁定的數據設置寬度就可以了

barEnter.style("width", d => d * 10 + "px");

最后，text文字設置同理

barEnter.text(d => d);

使用比例尺

上面的例子中我們使用了magic number => 10，讓bar的像素寬度=數值*10，使得bar的寬度看起來容易對比，但是正常情況下使用magic number會很麻煩且不易調試，而且不僅有放大像素數值的情況，也有縮小像素數值的情況，所以引入了比例尺
這里使用線性比例尺

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") //使用比例尺，比例尺是個函數
  .text( d => d);

總結

初步入門，有不對請大佬指出

參考資料

Let’s Make a Bar Chart I
selection.data()
selection.enter()
selection.exit()
selection.join()
[譯]D3.js 之 d3-selection 原理

GPU云服務器云服務器條形圖音頻條形圖 python做條形圖 asp生成條形圖

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

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

使用JavaScript和D3.js實現數據可視化

摘要：它的全稱是數據驅動文檔，并且它被稱為一個互動和動態的數據可視化庫網絡。我們將使用文本編輯器和瀏覽器。出于測試目的，建議使用工具來檢查和調試和，例如或。使矩形反映數據目前，我們陣列中的所有矩形沿軸具有相同的位置，并且不代表高度方面的數據。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由獨木橋先生發表于云+社區專欄介紹 D3.js是一個JavaScript庫。它的...

mingde 2019-08-23 10:56 評論0 收藏0
使用D3.js構建實時圖形

摘要：在本教程中，我們將探討如何使用和構建實時圖形。通過方法監聽輪詢更新，并在收到更新后使用最新數據調用函數，以便重新呈現圖形。首先你需要在計算機上安裝Node和npm。數據的可視化表示是傳遞復雜信息的最有效手段之一，D3.js提供了創建這些數據可視化的強大工具和靈活性。 D3.js是一個JavaScript庫，用于使用SVG，HTML和CSS在Web瀏覽器中生成動態的交互式數據可視化。...

Ryan_Li 2019-08-23 11:31 評論0 收藏0
使用D3.js構建實時圖形

摘要：在本教程中，我們將探討如何使用和構建實時圖形。通過方法監聽輪詢更新，并在收到更新后使用最新數據調用函數，以便重新呈現圖形。首先你需要在計算機上安裝Node和npm。數據的可視化表示是傳遞復雜信息的最有效手段之一，D3.js提供了創建這些數據可視化的強大工具和靈活性。 D3.js是一個JavaScript庫，用于使用SVG，HTML和CSS在Web瀏覽器中生成動態的交互式數據可視化。...

AlphaWatch 2019-08-02 16:31 評論0 收藏0
11個React Native 組件庫和 Javascript 數據可視化庫

摘要：數據可視化庫超過的的可能是最流行和最廣泛的數據可視化庫。是一組組件，用于高效地渲染大型列表和表格數據。一種優雅而靈活的方式，可以利用組件來支持實際的數據可視化。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ React Native 組件庫 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

tangr206 2019-08-23 17:11 評論0 收藏0