精选文章 d3 选择器

d3 选择器

作者:Jiang112323 时间: 2017-08-04 01:37:00
Jiang112323 2017-08-04 01:37:00

一、隔了一段时间没看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:
               
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);
         };
         */

 

转载于:https://www.cnblogs.com/createGod/p/7282905.html

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:linux系统网卡配置文件找不到,DHCP不工作情况解决

下一篇:python实现数据爬取-清洗-持久化存储-数据平台可视化

您可能感兴趣

  • IntellIJ IDEA2020新功能

    一、java 1、Java 14支持:记录和模式匹配 IntelliJ IDEA 2020.1添加了对Java 14及其新功能的支持。IDE不仅添加了对Records的完整代码洞察支持,而且还使您能够快速创建新记录并生成其构造函数和组件,并警告存在的错误。您还将发现对instanceof运算符的模式匹配的支持,包括新的检查和快速修复,该快速修复通过用新的简洁模式变量替换它们来快速简化冗长的i...

  • hualinux 进阶 1.24:k8s调度器的优先级与抢占机制 (整理)

    目录 一、优先级和抢占机制说明 二、优级先和抢占机制设计和实现 k8s调度器的优先级与抢占机制,这个比较重要,需要了解。 优先级和抢占机制,解决的是 Pod 调度失败时该怎么办的问题。 一、优先级和抢占机制说明 优先级和抢占机制,解决的是 Pod 调度失败时该怎么办的问题。 正常情况下,当一个 Pod 调度失败后,它就会被暂时“搁置”起来,直到 Pod 被更新,或者集群状态发生变化,调度器才...

  • 浅层砂过滤器(浅层介质过滤器)介绍及现场案例反馈图(多图)

    浅层砂过滤器(浅层介质过滤器)是由多个标准高速砂缸单元组成,其内部设有D特的布水器和集水器,拥有的双向自动冲洗阀,可实现在正常系统运行中多个标准高速砂缸逐个单独的反冲洗,全自动程序控制。具有反冲洗用水量小,设备安装方便,易于操作等优点。该设备流量大,无需维护。根据不同的用户要求,有立式和卧式两个系列。适用于工业和民用循环水系统的水质处理。 【浅层砂过滤器(浅层介质过滤器)工作原理】 浅层砂过...

  • 解放双手、提高效率,如何优雅的做一名IDC运维!

    在IDC行业中,有一群从业者很特殊,你上班时他在上班,你休息时他在加班,你休假时他还在值班。这个人就是IDC运维工程师,听听他们自己怎么说。 我的职业是一名IDC运维工程师,守护机房的工兵,日常工作主要是维护机房的IT设备、网络系统的稳定,还有维护客户和公司的和谐关系,简称"维稳"人员。 今年是我在运维部门第七个年头了,我每天的工作看起来"轻松",实际很繁重。 经常来回奔波,出入各个机房是我...

  • Java异常面试题(2020最新版)

    文章目录 Java异常架构与异常关键字 Java异常简介 Java异常架构 1. Throwable 2. Error(错误) 3. Exception(异常) 运行时异常 编译时异常 4. 受检异常与非受检异常 受检异常 非受检异常 Java异常关键字 Java异常处理 声明异常 抛出异常 捕获异常 如何选择异常类型 常见异常处理方式 直接抛出异常 封装异常再抛出 捕获异常 自定义异常 t...

  • html5语义化结构元素_语义HTML5在文档结构中的秘密

    html5语义化结构元素 Look at the graph given above, and you can quickly see how extensively HTML 5 is growing popularity. The Semantic HTML 5 has almost replaced the HTML. Now, we are going to discuss Sema...

  • C++提供了四个转换运算符:const_cast,static_cast,reinterpret_cast

    https://blog.csdn.net/TanJiaLiang_/article/details/83992337 用const_cast来去除const限定 于是const_cast就出来消灭const,以求引起程序世界的混乱。 下边的代码就顺利编译功过了: const int constant = 21; const int* const_p = &constant; int* mo...

  • 爬虫所使用的的HTTP代理是什么?

    在爬取某些网站时,我们经常会设置HTTP代理IP来避免爬虫程序被封。我们获取代理 IP 地址方式通常提取国内的知名 IP 代理商的免费代理。这些代理商一般都会提供透明代理,匿名代理,高匿代理。那么这几种代理的区别是什么?我们该如何选择呢?本文的主要内容是讲解各种代理IP背后的原理。 1、代理类型 代理类型一共能分为三种。透明代理,匿名代理,高匿代理,从安全程度来说,这四种代理类型的排序是 高...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。