一、隔了一段时间没看D3了,好多api又陌生了。武林太大,唯有自强不息。

  D3 选择器算是学习D3的第一步吧。 跟 学习JQ一样。先熟悉下api,才能够如鱼得水,手到勤来。

二、 选择器

  1.选择器

 /*
 1.d3.select(dom); dom => 可以是类,ID。说白了跟JQ的 $(dom) 完全一样。不过select返回的时候。页面中匹配到的第一个元素。 或者为null  2.d3.selectAll(dom); => 跟JQ完全一样。 $(dom) */

2.内容(主要是更改DOM元素的属性和类名的方法)

 /*
1. selection.attr(name[, value])
意思是
(1) d3.selectAll('p').attr('data-href','http://baidu.com');
相当于JQ中的 $(dom).attr(); 的方法一样。
(2) 其中value 为function的时候 (d,i, this) i=> 的选中元素的序号, this 当前的元素
d3.select(this).attr('data-href',i)
d3.selectAll('p').attr('data-href',function(d,i){
return i;
}) 2.section.classed(name[,value]);
跟上面的attr 基本一样。顾名思义 => 就是对类名的操作。
eg: d3.selectAll('div').classed({"foo":true,"bar":"false"});
或者
d3.selectAll('div').classed('foo bar',true);
true => 对匹配的元素还为添加这个class名的元素添加这个class名字。
false => 对匹配的元素有这个class名的元素去掉这个class名字
3.section.style(name[, value[, priority]])
跟上面classed 的用法基本一样。我就不细说了
eg:
d3.selectAll('span').style({'color':'red','font-size':'50px'});
4.selection.property(name[, value])
跟classed的方法差不多。
主要是针对表单元素中 的属性 比如 : disable,checkbox,radio。readonly等等 eg : de.selectAll('input').property({'checkbox':true,'disable':false})
5.select.text();
这个方法跟JQ的text(); 方法一样。
6.section.html(); 同上
7.section.append(); 想选中元素的后面插入dom节点
跟jq一样
8. section.insert(); 选中的dom 元素中的子节点前面插入
9.section.remove(); 溢出 */

3.section.data()

  /*
section.data([values[, key]);的方法比较复杂。 主要涉及到几点
1.一种情况就是选中的元素和data数据刚好匹配。 这时候
可以直接
html:
<div class="div"></div>
<div class="div"></div> d3.select("body").selectAll('.div').data([1,23]).text(function(d){
return d;
});
2. 匹配元素有0个。单时候数据有多条的时候。
d3.selectAll('.a').data([1,2,3]).enter().append('.a').text(function(d){
return d;
});
3. 匹配的元素有多个的时候。也就是数据更少。需要把多余的元素删掉
d3.selectAll('.b').data([1]).exit().remove(); 所以我们写方法的时候。基本都是
d3.selectAll('.c').data([1,2,3]).enter().append('.a').exit().remove();
你们肯定发现了。这跟JQ的链式编程一样。 */
//1.
var matrix = [
[11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907]
]; var tr = d3.select("body").append("table").selectAll("tr")
.data(matrix)
.enter().append("tr"); var td = tr.selectAll("td")
.data(function(d) { return d; })
.enter().append("td")
.text(function(d) { return d; }); /*
section.enter();
section.exit();
section.remove();的方法就不介绍了。上面有啊 */

  

 /*
d3.section.datum 获取或设置每个选定的元素绑定的数据。不像selection.data方法,这种方法不计算一个连接(并因此不计算enter和exit的选择)。此方法在selection.property之上实现: d3.selection.prototype.datum = function(value) {
return arguments.length < 1
? this.property("__data__")
: this.property("__data__", value);
};
*/

d3 选择器的更多相关文章

  1. D3.js使用过程中的常见问题(D3版本D3V4)

    目录 一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式 三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中 ...

  2. d3 + geojson in node

    d3.js本来主要是用于用“数据驱动dom”,在浏览器端,接收后端数据,数据绑定,渲染出svg. 即使是在ng中用,也是会由框架打包,供客户端下载. 那么,如果用所谓后端渲染,发布静态的svg,那就要 ...

  3. 1216 Vue基础

    目录 前端框架 Vue 1.简介 1.1 优点 2 使用 2.1 基础 2.2 文本指令 2.3 事件指令 2.4 属性指令 JS面向对象补充 前端框架 angular ---更新程度太快,且不向下兼 ...

  4. d3.js制作条形时间范围选择器

    此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/12146688.html 效果如上图所示. 本项目使用主要d3.js v4制作,可以用来选择两年的 ...

  5. D3的基本设计思路

    学习一项新技术,首先要搞清楚它的基本设计思路,有了这个宏观的技术架构,使用该技术起来,就会得心应手了.否则,就会不知道如何下手,即使看到人家的例子程序,可能也不知其所以然. 下面,就简单的结合自己研究 ...

  6. 精通D3.js学习笔记(1)基础的函数

    买了本吕大师的d3可视化.最近来学习一下,做个笔记.   1.选择元素  select(第一元素) 和selectAll(全部的元素)      类似css的选择器.也可以是dom选中的. var i ...

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

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

  8. D3序

    最近做公司的APM项目涉及到数据可视化,简单调研了一下目前业内推崇的工具,自然最终选择是非D3莫属,特别是看了官网上那些绝妙的示例之后,感觉这玩意儿炫到爆!选择D3最重要的一点是D3提供基础的必要的功 ...

  9. d3可视化实战02:理解d3数据驱动的真正含义

    前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...

随机推荐

  1. Moleskine智能笔+专用本:写完随时传到手机

    http://www.totiot.com/61805.html Moleskine公司生产的速写本和速写板一直是涂鸦爱好者和速记员们的首选.该公司还联合Adobe. Livescribe. Ever ...

  2. scrapy的request的meta参数是什么意思?

    作者:乌尔班链接:https://www.zhihu.com/question/54773510/answer/146971644来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  3. unset MAILCHECK

    文件/etc/profile尾部有: unset MAILCHECK 为了解决:每次登陆linux总是提示:you hava a new mail

  4. OpenCV——归一化函数normalize

    函数原型: void cv::normalize(InputArry src,InputOutputArray dst,double alpha=1,double beta=0,int norm_ty ...

  5. CSS grid layout

      CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小.位置和图层之间的关系. 像表格一样,网格布局让我们能够按行或列来对齐元素. 但是,使用CSS网格可能还是比CSS表格更容 ...

  6. php操作oracle查询时中文乱码

    putenv("LD_LIBRARY_PATH=/usr/lib/oracle/12.1/client64/lib"); putenv("ORACLE_HOME=/usr ...

  7. javaee_SSH

    这是javaee课程的第六个实验ssh sturts2+sping 3+hibernate 现予以记录整个过程,以防遗忘 1. 2. 3. 4. 5.输入mvnrepository.com进入-> ...

  8. sql语句之表间字段值复制遇到的一些问题--基于mysql

    好久没来园子了,转眼2017已经到3月份了,前段时间一直忙没时间写博客(其实是自己懒),感觉内心好惭愧.昨天临下班前,技术老大突然对我说要改下表结构,问我能不能实现将一个表的字段值复制到另外一个表的某 ...

  9. 数据结构与算法之Stack(栈)的应用——用stack实现一个计算器-/bin/calc.dart

    计算器的bin/calc.dart 可执行代码: import 'dart:io'; import 'package:data_struct/stack/sample/calculator.dart' ...

  10. 使用pandas,7行代码实现朴素贝叶斯

    作者:hhh5460 大抵分成两类 一.离散的.标签化的数据 原文没有使用pandas,我使用pandas重新实现了朴素贝叶斯算法,看起来非常简洁.清爽. import pandas as pd '' ...