交互式數據可視化－D3.js（二）選擇集和數據

褰辯話發布于2019-08-23 12:42 / 3070人閱讀

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

選擇集

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)

操作選擇集 查看狀態

判斷選擇集是否為空：

    selection.empty()

返回第一個選擇集：

    selection.node()

返回選擇集的長度：

    selection.size()

設定和獲取

    selection.attr(name,[ name])

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

    selection.property(name,[ name])

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

    selection.classed(name,[ name])

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

添加，插入和刪除

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

    selection.append()

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

    selection.inster()

刪除選中的元素：

    selection.remove()

數據綁定

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

selection.datum()

和

selection.data()

datum的工作過程

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

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

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

data()的工作過程

data能將數據各項分別綁定到選擇的元素集上。當數組長度與元素數量不一致時，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。

云服務器 GPU云服務器 d3.js數據可視化實戰大數據可視化 d3.js d3.js數據可視化實戰手冊交互式數據可視化

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

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

交互式數據可視化－D3.js（二）選擇集和數據

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

leanote 2019-08-02 11:54 評論0 收藏0
以 Join 的方式來思考D3.js

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

mikasa 2019-08-22 18:01 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

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

cfanr 2019-08-20 10:34 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

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

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

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

Hydrogen 2019-08-02 11:46 評論0 收藏0