d3初級教程之data的Key函數

enda 發布于2019-08-21 12:12 / 2980人閱讀

摘要：一開始用一直都沒留意到還有個參數后來剛接觸到函數就有些讓我迷惑了再后來發現這的確是個神器呀巴拉巴拉巴拉廢話不多說讓我們通過一個簡單的來認識一下它在一個空白頁添加下面代碼樣式三個天藍色小藍條登場分別是寬度為的元素我們在中添加如下代碼并運行情況

一開始用D3.data()一直都沒留意到還有個Key參數,后來剛接觸到key函數就有些讓我迷惑了,再后來發現這的確是個神器呀.巴拉巴拉巴拉...廢話不多說,讓我們通過一個簡單的demo來認識一下它.
在一個空白頁添加下面代碼
樣式:

div {
            margin: 10px 10px;
            height: 20px;
            background: #0055ff;
        }

js:

var dataset = [1, 2, 3];
    var divs = d3.select("body")
            .selectAll("div")
            .data(dataset)
            .enter()
            .append("div")
            .style("width", function (d) {
                return d * 100 + "px";
            });

ok,.三個天藍色小藍條登場,分別是寬度為100px, 200px, 300px的div元素

1,我們在js中添加如下代碼并運行:

function change() {
        dataset = [3];
        divs.data(dataset)
            .exit()
            .remove();
    }
    setTimeout(change, 2000)

ok,情況大致你能猜到,第一條小藍條留了下來,后面兩條被干掉了,觀察留下的藍條 data 屬性,是3

2, 將1中添加的代碼換成下面的并運行:

 function change() {
    dataset = [3];
    divs.data(dataset, function(d) {
        return d;
    })
        .exit()
        .remove();
}
setTimeout(change, 2000);

細心的你能發現,我們只是給selection.data()添加了一個Key函數
這時神奇的事情出現了,前兩條藍條被干掉留下了第三條.藍條的 data屬性任然是3

完畢,思考半分鐘,你想到了沒有,其實總的來說data的key函數參數,提供了一種,由data到selection的映射關系.
希望我的文章能幫助到你,更多資料請翻閱d3js.org,我是朱現明,任職于精碩科技可視化部門前端開發,更多精彩的文章即將奉上.

zhuxianming@admaster.com.cn

GPU云服務器云服務器 d3.js 函數曲線 d3.js視頻教程 python的key linux的key

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

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

d3js中級教程之漂浮的卡牌效果(data的key函數進階)

摘要：效果如圖所示鏈接地址源碼鏈接地址其實這個例子也很簡單用到的也只是的基礎部分我們要把一定間隔請求過來的數據進行排序并生成元素同時重用原來和新數據相對應的元素刪除不對應的說的有點繞表達能力不行其實說到這明白人都能看出來了這要用到選擇器的以及方法 showImg(http://segmentfault.com/img/bVbZY5); 效果如圖所示,demo鏈接地址源碼鏈接地址其實這個例...

zhoutao 2019-08-28 17:53 評論0 收藏0
d3js中級教程之漂浮的卡牌效果(data的key函數進階)

摘要：效果如圖所示鏈接地址源碼鏈接地址其實這個例子也很簡單用到的也只是的基礎部分我們要把一定間隔請求過來的數據進行排序并生成元素同時重用原來和新數據相對應的元素刪除不對應的說的有點繞表達能力不行其實說到這明白人都能看出來了這要用到選擇器的以及方法 showImg(http://segmentfault.com/img/bVbZY5); 效果如圖所示,demo鏈接地址源碼鏈接地址其實這個例...

Lin_R 2019-08-21 12:13 評論0 收藏0
D3中級教程之帶有動畫效果的簡易羅盤

摘要：最終效果如上圖所示說是中級教程代碼其實也太簡單源碼鏈接在此部分解釋一下首先聲明這是作者推薦的寫法還是規范點好這樣寫不久你就會發現事半功倍其次是函數畫圓環全靠它自定義函數用于給定和圓環的最大值計算結束角度自定義函數用于給定和圓環的最大值計算指 showImg(http://segmentfault.com/img/bVbX9J); 最終效果如上圖所示說是中級教程,代碼其實也太簡...

littlelightss 2019-08-21 12:12 評論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