成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

d3初級(jí)教程之data的Key函數(shù)

enda / 3066人閱讀

摘要：一開始用一直都沒留意到還有個(gè)參數(shù)后來剛接觸到函數(shù)就有些讓我迷惑了再后來發(fā)現(xiàn)這的確是個(gè)神器呀巴拉巴拉巴拉廢話不多說讓我們通過一個(gè)簡(jiǎn)單的來認(rèn)識(shí)一下它在一個(gè)空白頁添加下面代碼樣式三個(gè)天藍(lán)色小藍(lán)條登場(chǎng)分別是寬度為的元素我們?cè)谥刑砑尤缦麓a并運(yùn)行情況

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

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,.三個(gè)天藍(lán)色小藍(lán)條登場(chǎng),分別是寬度為100px, 200px, 300px的div元素

1,我們?cè)趈s中添加如下代碼并運(yùn)行: 
function change() {
        dataset = [3];
        divs.data(dataset)
            .exit()
            .remove();
    }
    setTimeout(change, 2000)


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

2, 將1中添加的代碼換成下面的并運(yùn)行: 
 function change() {
    dataset = [3];
    divs.data(dataset, function(d) {
        return d;
    })
        .exit()
        .remove();
}
setTimeout(change, 2000);


細(xì)心的你能發(fā)現(xiàn),我們只是給selection.data()添加了一個(gè)Key函數(shù)
這時(shí)神奇的事情出現(xiàn)了,前兩條藍(lán)條被干掉留下了第三條.藍(lán)條的 data屬性任然是3

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

zhuxianming@admaster.com.cn

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87498.html

相關(guān)文章

  • d3js中級(jí)教程之漂浮的卡牌效果(data的key函數(shù)進(jìn)階)

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

    zhoutao 評(píng)論0 收藏0

  • d3js中級(jí)教程之漂浮的卡牌效果(data的key函數(shù)進(jìn)階)

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

    Lin_R 評(píng)論0 收藏0

  • D3中級(jí)教程之帶有動(dòng)畫效果的簡(jiǎn)易羅盤

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

    littlelightss 評(píng)論0 收藏0

  • 使用D3.js構(gòu)建實(shí)時(shí)圖形

    摘要：在本教程中，我們將探討如何使用和構(gòu)建實(shí)時(shí)圖形。通過方法監(jiān)聽輪詢更新，并在收到更新后使用最新數(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庫，用于使用SVG，HTML和CSS在Web瀏覽器中生成動(dòng)態(tài)的交互式數(shù)據(jù)可視化。...

    Ryan_Li 評(píng)論0 收藏0

  • 使用D3.js構(gòu)建實(shí)時(shí)圖形

    摘要：在本教程中，我們將探討如何使用和構(gòu)建實(shí)時(shí)圖形。通過方法監(jiān)聽輪詢更新，并在收到更新后使用最新數(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庫，用于使用SVG，HTML和CSS在Web瀏覽器中生成動(dòng)態(tài)的交互式數(shù)據(jù)可視化。...

    AlphaWatch 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<