成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

交互式數(shù)據(jù)可視化－D3.js（二）選擇集和數(shù)據(jù)

褰辯話 / 3079人閱讀

摘要：相關(guān)的函數(shù)有兩個和的工作過程的方法很簡單，使用的也比較少。的工作過程能將數(shù)據(jù)各項分別綁定到選擇的元素集上。當(dāng)數(shù)組長度與元素數(shù)量不一致時，同樣能夠處理。多出的元素在最后。

選擇集

select和selectAll類似jquery：

    d3.select("body")
    d3.select(".body")
    d3.select("#body")
    d3.selectAll("p")
    d3.selectAll(".box")
    var conent = document.getElementById("#box")
    d3.select(conent)
操作選擇集 查看狀態(tài)

判斷選擇集是否為空：

    selection.empty()

返回第一個選擇集：

    selection.node()

返回選擇集的長度：

    selection.size()
設(shè)定和獲取 
    selection.attr(name,[ name])

設(shè)置或獲取選擇集的屬性name是屬性名稱，value是屬性值，省略value則返回屬性值
有部分屬性不能通過attr獲取或設(shè)置則使用：

    selection.property(name,[ name])

使用方法一致，總之不能通過attr獲取的屬性，都可以考慮property
設(shè)定className開關(guān)

    selection.classed(name,[ name])

name是類名， value是一個布爾值，表示是否開啟

添加，插入和刪除

在選擇集的末尾插入元素：

    selection.append()

在選擇集的元素之前插入元素：

    selection.inster()

刪除選中的元素：

    selection.remove()
數(shù)據(jù)綁定

d3.select和d3.selectAll返回元素的選擇集，選擇集上是沒有數(shù)據(jù)的，數(shù)據(jù)綁定就是使選擇的元素添加數(shù)據(jù)。相關(guān)的函數(shù)有兩個

selection.datum()

和

selection.data()
datum的工作過程

datum的方法很簡單，使用的也比較少。

    var p = d3.select(".box").selectAll("p");
    p.datum("這里是數(shù)據(jù)綁定").append("span").text(function(d, i){
        return i + "<----> " + d;
    });

datum綁定了一個字符串這里是數(shù)據(jù)綁定到選擇集的子元素上。這一點很常用。

data()的工作過程

data能將數(shù)據(jù)各項分別綁定到選擇的元素集上。當(dāng)數(shù)組長度與元素數(shù)量不一致時，data同樣能夠處理。

    

        

        

        

        

        

        

        

        

        

        

    

    
    var p = d3.select(".box").selectAll("p");
    var updateData = p.data([2,4,6])
    updateData.text(function(d, i){
        console.log(d)
        return d;
    })
    updateData.enter().append("p").text(function(d, i){
        console.log(d);
        return d;
    });
    updateData.exit().remove();

多出的元素在最后renove。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98954.html

相關(guān)文章

  • 交互式數(shù)據(jù)可視化－D3.js（二）選擇集和數(shù)據(jù)

    摘要：相關(guān)的函數(shù)有兩個和的工作過程的方法很簡單，使用的也比較少。的工作過程能將數(shù)據(jù)各項分別綁定到選擇的元素集上。當(dāng)數(shù)組長度與元素數(shù)量不一致時，同樣能夠處理。多出的元素在最后。 選擇集 select和selectAll類似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

    leanote 評論0 收藏0

  • 以 Join 的方式來思考D3.js

    摘要：以的方式來思考聲明原文鏈接來自作者譯文地址如果覺得還不錯不妨去給個打個比方你想用畫一個散點圖用每一個的元素來可視化你的數(shù)據(jù)你會驚訝的發(fā)現(xiàn)居然沒有直接創(chuàng)建多個元素的方法怎么回事當(dāng)然有方法你可以用來創(chuàng)建單個元素比如但這只是一個圓如果你想要創(chuàng)建很 以 Join 的方式來思考D3.js 聲明 原文鏈接: 來自 D3作者 Mike Bostock https://bost.ocks.org/mi...

    mikasa 評論0 收藏0

  • javascript功能插件大集合，寫前端的親們記得收藏

    摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過充分測試和記錄數(shù)據(jù)結(jié)構(gòu)的庫。 【導(dǎo)讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護的 JS 資源列表...

    cfanr 評論0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    netmou 評論0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    Hydrogen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<