D3.js学习
// 1.选择
d3.select('p')
d3.selectAll('p')
d3.select('.txt').style('color', '#fff')
// 2.支持动态设置属性
// a:随机属性
d3.selectAll('p').style('color', function (d, i) {
return 1 % 2 ? '#fff' : '#eee'
})
// b.将数组中的属性设置给元素
d3.selectAll('p')
.data([4, 8, 15, 16, 23, 42])
.style('font-size', function (d) {
return d + 'px'
});
// enter操作:添加DOM
d3.select('body')
.selectAll('p')
.data([4, 8, 15, 16, 23, 42])
.enter()
.append('p')
.text(function (d) {
return 'i am number' + d + '!'
})
// 数据和元素一样
var p = d3.select('body')
.selectAll('p')
.data([4, 8, 15, 16, 23, 42])
.text(function (d) {
return d
})
// exit操作:删除DOM
var p = d3.select('body')
.selectAll('p')
.data([4, 8, 15, 16, 23, 42])
.text(function (d) {
return d;
})
p.exit().remove()
// 不确定数据多少的情况下,可以三种方法一起使用;
var p=select('body')
.selectAll('p')
.data([4, 8, 15, 16, 23, 42])
.text(function(d){return d;})
p.enter().append('p').text(function(d){return d;})
p.exit().remove()
// classed:设置元素的类class一个或者多个
// var p = d3.select('body').select('p').classed('test foo', true)
// attr:设置元素的属性,selection.attr(name[,value]),如果value是一个函数,参数为d和i
// var p = d3.select('body').selectAll('p').data('2').attr('title',function(d){return d;})
// selection.style(name,[,value[,priority]])设置元素的样式;
// selection.style({'stroke': 'black', 'stroke-width': 2})
// selection.property:可设置元素的属性,如checkbox的选中等;
// d3.select('.check').property('checked',true)
D3的布局:
一共有12种,这些布局的作用都是将某种数据转换成另一种数据,而转换后的数据是利于可视化的;
D3.js学习的更多相关文章
- 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总
习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...
- D3.js学习(一)
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
- D3.js学习记录【转】【新】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- D3.js学习笔记(六)——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
- d3.js学习笔记(五)——将数据结构化为D3.js可处理的
目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...
- D3.js学习笔记(一)——DOM上的数据绑定
开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...
- D3.js学习(七)
上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...
- D3.js学习记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- D3.js学习笔记(四)—— 使用SVG坐标空间
目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...
- D3.js学习笔记(三)——创建基于数据的SVG元素
目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...
随机推荐
- django基类View.as_view()
参考:https://www.zmrenwu.com/post/53/ 详细见参考 一般请求的判断方法: def view(request, *args, **kwargs): if request. ...
- python界面Tkinter编程(tkMessageBox对话框使用)
python界面Tkinter编程(tkMessageBox对话框使用) 转载 https://blog.csdn.net/m_buddy/article/details/80105154 1 ...
- Codeforces 862B (二分图染色)
<题目链接> 题目大意: 给出一个有n个点的二分图和n-1条边,问现在最多可以添加多少条边使得这个图中不存在自环,重边,并且此图还是一个二分图. 解题分析: 此题不难想到,假设二分图点集数 ...
- Redis实现的分布式锁和分布式限流
随着现在分布式越来越普遍,分布式锁也十分常用,我的上一篇文章解释了使用zookeeper实现分布式锁(传送门),本次咱们说一下如何用Redis实现分布式锁和分布限流. Redis有个事务锁,就是如下的 ...
- 三篇文章带你极速入门php(二)之迅速搭建php环境
前言 今天讲一下php在windows,mac,linux上的集成环境搭建,目标是简单快速,环境这个事得对号入座,windows用phpstudy,mac用mamp,linux用lnmp一键安装,直接 ...
- C# 判断输入的字符串是否只包含数字和英文字母
/// <summary> /// 判断输入的字符串是否只包含数字和英文字母 /// </summary> /// <param name="input&quo ...
- 公开课 之 tony 电子时钟 (课堂笔记)
# tony 之电子时钟from PyQt5.QtWidgets import QApplication, QWidget, QLCDNumber, QDesktopWidget, QVBoxLayo ...
- java的关键字与保留字
1,Java 关键字列表 (依字母排序 共50组): abstract, assert, boolean, break, byte, case, catch, char, class, const(保 ...
- GC日志
JVM的GC日志的主要参数包括如下几个: -XX:+PrintGC 输出GC日志 -XX:+PrintGCDetails 输出GC的详细日志 -XX:+PrintGCTimeStamps 输出GC的时 ...
- Centos7安装Redis 3.2.8
关闭防火墙和SELinx 关闭防火墙 [root@node1 ~]# systemctl stop firewalld 开启防火墙 [root@node1 ~]# systemctl enable f ...