选择集

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同样能够处理。

    <div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div> 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(二)选择集和数据的更多相关文章

  1. 数据可视化d3.v4.js

    <html> <head> <meta charset="utf-8"> <title>做一个简单的条形图</title> ...

  2. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  3. 前端数据可视化echarts.js

    一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...

  4. HTML5大数据可视化效果(二)可交互地铁线路图

    前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...

  5. Python图表数据可视化Seaborn:1. 风格| 分布数据可视化-直方图| 密度图| 散点图

    conda  install seaborn  是安装到jupyter那个环境的 1. 整体风格设置 对图表整体颜色.比例等进行风格设置,包括颜色色板等调用系统风格进行数据可视化 set() / se ...

  6. 一招教你轻松使用数据可视化BI软件创建旅游消费数据可视化大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以旅游消费数据可视化大屏为 ...

  7. 不懂怎么创建可视化大屏?手把手教你使用数据可视化BI软件创建工厂车间数据监控大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以工厂车间数据监控大屏为例 ...

  8. 数据可视化:使用python代码实现可视数据随机漫步图

    #2020/4/5 ,是开博的第一天,希望和大家相互交流学习,很开森,哈哈~ #像个傻子哟~       #好,我们进入正题, #实现功能:利用python实现数据随机漫步,漫步点数据可视化 #什么是 ...

  9. D3.js 其他选择元素方法

    在上一节中,已经讲解了 select 和 selectAll,以及选择集的概念.本节具体讲解这两个函数的用法. 假设在 body 中有三个段落元素: <p>Apple</p> ...

随机推荐

  1. 搜索专题:Balloons

    搜索专题:Balloons 这道题一看与时间有关,第一想到的就是BFS,定义一个状态,包含每一个状态的剩余气球数,已经进行的时间和每一个志愿者上一次吹气球的时间: 每一次状态转换时,检查是否有没有使用 ...

  2. const关键字 C与C++分析

    1 C与C++的区别 1.1.C允许定义两个变量名相同的变量,而C++不允许. 在C语言中是允许定义两个名字相同的全局变量.  在C++中是不允许定义两个名字相同的全局变量. 测试代码: /* 编译环 ...

  3. 不用再去找rem了,你想要的rem都在这

    一.兼容性. 目前,IE9+,Firefox.Chrome.Safari.Opera 的主流版本都支持了rem(大胆用吧,目前几乎所有手机浏览器都支持rem) 二.什么是rem. rem是相对于根元素 ...

  4. tomcat部署项目时 报错Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web modules

    Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web modules 解决方法: 找到文件 .set ...

  5. java面试题全集(下)

      这部分主要是开源Java EE框架方面的内容,包括Hibernate.MyBatis.Spring.Spring MVC等,由于Struts 2已经是明日黄花,在这里就不讨论Struts 2的面试 ...

  6. kill - 终止进程

    SYNOPSIS(总览) kill[-ssignal|-p][-a]pid... kill -l [ signal ] DESCRIPTION (描述) kill 给指定进程发送指定信号. 如果没有指 ...

  7. Vue Cli 移动端开发

    一.

  8. AIX中的/etc/inittab文件

    1./etc/inittab文件   /etc/inittab文件从上到下逐行表述了某个服务或应用的启动需求.运行级别.应用脚本,格式如下: identifier:Runlevel:  Action: ...

  9. mariadb增删改查

    数据库用户的操作 登录前需先启动3306端口. 首次启动需初始化数据库 mysql_secure_installation 增/改: 创建用户及赋予用户指定权限 grant 权限(分为create[创 ...

  10. Python excel读写

    # coding=utf-8 print "----------------分割线 xlrd--------------------" import xlrd #打开一个wordb ...