交互式数据可视化-D3.js(二)选择集和数据
选择集
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(二)选择集和数据的更多相关文章
- 数据可视化d3.v4.js
<html> <head> <meta charset="utf-8"> <title>做一个简单的条形图</title> ...
- 前端数据可视化echarts.js使用指南
一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...
- 前端数据可视化echarts.js
一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...
- HTML5大数据可视化效果(二)可交互地铁线路图
前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...
- Python图表数据可视化Seaborn:1. 风格| 分布数据可视化-直方图| 密度图| 散点图
conda install seaborn 是安装到jupyter那个环境的 1. 整体风格设置 对图表整体颜色.比例等进行风格设置,包括颜色色板等调用系统风格进行数据可视化 set() / se ...
- 一招教你轻松使用数据可视化BI软件创建旅游消费数据可视化大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以旅游消费数据可视化大屏为 ...
- 不懂怎么创建可视化大屏?手把手教你使用数据可视化BI软件创建工厂车间数据监控大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以工厂车间数据监控大屏为例 ...
- 数据可视化:使用python代码实现可视数据随机漫步图
#2020/4/5 ,是开博的第一天,希望和大家相互交流学习,很开森,哈哈~ #像个傻子哟~ #好,我们进入正题, #实现功能:利用python实现数据随机漫步,漫步点数据可视化 #什么是 ...
- D3.js 其他选择元素方法
在上一节中,已经讲解了 select 和 selectAll,以及选择集的概念.本节具体讲解这两个函数的用法. 假设在 body 中有三个段落元素: <p>Apple</p> ...
随机推荐
- AT2292 Division into Two
题目 不妨认为\(A>B\). 首先判一下无解. 设\(f_i\)表示\(A\)集合最后选第\(i\)个数的方案数. 转移的话枚举一下从哪个\(j\)转移过来. 显然\(j\)需要满足以下条件: ...
- Luogu P1650 田忌赛马
题目 如果我们最大比对面最大大,那么直接用. 如果我们最小比对面最小大,那么直接用. 否则用我们最小去换对面最大. #include<bits/stdc++.h> using namesp ...
- Android API文档
官方API文档: Android官网: https://developer.android.google.cn/index.html (不需要梯子) Android官网: https://develo ...
- 部署 laravel项目404错误
1.nginx 下部署出现404错误 (1)打开php.ini中的php_openssl.dll这个扩展: (2)修改nginx 下的站点目录配置文件(我的是配置在vhost.conf)为: loca ...
- Java Web开发技术教程入门-项目-读取用户注册信息
昨天说要补个项目来巩固下这几天学的知识,于是今天咱们就写一个读取用户注册信息的小项目.读取用户信息注册信息这个功能在各大网站都是很常见的.好,话不多说.开始我们的编程之旅! 软件环境:JDK9.0 ...
- 51nod 2589 快速讨伐
51nod 如果不考虑升级操作,只有买装备操作和打怪操作,那么首先一定要先买装备,然后可以打死1级的怪,这些怪被打死的时间只要在第一次买装备后面好了,因为现在总操作是\(n+\sum a_i\)个,所 ...
- mybatis多对多关联关系映射
mybatis多对多关联关系映射 多对多关系在java类实体中表示为,一个类中包含了集合为另一个类的属性.而这连个实体都需要包含对方的集合类的属性. 例如:订单和商品,一个订单包含多个商品,一个商品又 ...
- drop与truncate与delete的区别与联系
在mysql和oracle数据库中delete与truncate都是可以用来对数据进行删除操作,但是二者又有些不同. 主要有以下几个区别: 区别一: 根据sql语言分类来说,delete属于DML语言 ...
- vue - helloVue
开始学习vue了 1.数据绑定:{{data}} 2.el属性(挂载对象): el:标签任意(例如:#app,.app,app) 3.data:{} :存放数据. <!DOCTYPE html& ...
- Vue常用修饰符
Vue提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的结果: 点击外层div的结果: 修改代 ...