交互式数据可视化－D3.js（二）选择集和数据

leanote 发布于2019-08-02 11:54 / 3280人阅读

摘要：相关的函数有两个和的工作过程的方法很简单，使用的也比较少。的工作过程能将数据各项分别绑定到选择的元素集上。当数组长度与元素数量不一致时，同样能够处理。多出的元素在最后。

选择集

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。

超融合服务器混合云 d3.js数据可视化实战大数据可视化 d3.js d3.js数据可视化实战手册交互式数据可视化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53196.html

交互式数据可视化－D3.js（二）选择集和数据

摘要：相关的函数有两个和的工作过程的方法很简单，使用的也比较少。的工作过程能将数据各项分别绑定到选择的元素集上。当数组长度与元素数量不一致时，同样能够处理。多出的元素在最后。选择集 select和selectAll类似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

褰辩话 2019-08-23 12:42 评论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