zoukankan      html  css  js  c++  java
  • d3.js:数据可视化利器之 selection:选择集

    选择集/selection

    选择集/selection是d3中的核心对象,用来封装一组从当前HTML文档中选中的元素:

    dom->selection

    d3提供了两个方法用来创建selection对象:

    • select(selector) : 只使用第一个匹配的元素创建选择集。
    • selectAll(selector) : 使用全部匹配的元素创建选择集。

    select:选中单个元素

    select()方法用来创建最多只包含一个DOM元素的选择集。如果当前文档中 没有匹配的元素,则建立一个空选择集;如果当前文档中有多个匹配的元素, 也只用第一个匹配元素建立选择集。

    有两种方法调用select()

    • 使用CSS3选择符指定匹配条件

    最常用的调用方法是传入一个CSS3选择符字符串:

    1. d3.select(selector)
    • 将DOM对象转化为选择集对象

    有时我们需要将一个DOM对象转化为一个选择集对象,这时可以直接向select() 方法传入这个DOM对象:

    1. d3.select(node)

    一种常见的应用场景是在事件回调函数中,将this转化成选择集对象: d3.select(this),因为这时this指向触发事件的DOM元素。

    selectAll:选中多个元素

    selectAll()方法用来创建可包含多个DOM元素的选择集。如果当前文档中 没有匹配的元素,则建立一个空选择集;如果当前文档中有多个匹配的元素, 则使用所有匹配元素建立选择集。

    和select()方法一样,也有两种方式调用selectAll()方法:

    • 使用CSS3选择符指定匹配条件

    最常用的调用方法是传入一个CSS3选择符字符串:

    1. d3.selectAll(selector)
    • 将一组DOM对象转化为选择集对象

    如果已经获得了一组DOM对象,可以直接将其转化为选择集对象:

    1. d3.selectAll(nodes)

    比如,在事件回调函数中,使用d3.select(this.childNodes)创建选择集。

    为什么需要选择集?

    d3定义选择集对象的一个目的是封装对DOM的操作。选择集提供了众多的方法(d3称之为 操作符/operator)来进行DOM操作,比如设置属性、样式、文本内容以及监听 DOM事件等。从这个角度看,d3的选择集对象类似于jQuery中的$对象,如果你 从jQuery过来,应该容易理解这一点:

    1. var s = d3.selectAll("div"); //选中所有div元素创建选择集对象:s
    2. s.text("demo"); //使用选择集对象的text()方法设置这些div元素的文本内容
    3. var $s = $("div"); //选中所有div元素创建jQuery对象:$s
    4. $s.text("demo"); //使用jQuery对象的text()方法设置这些div元素的文本内容

    有趣的是,d3的选择集对象和jQuery对象一样,也具有链式调用的能力。绝大多数的选择 集操作符返回的结果还是一个选择集(可能和最初的选择集内容不一样),这使得调用可以持续下去, 像一条流水线:

    pipeline

    容易理解,选择集是d3中文档处理流水线的开端,选择集的操作符就是流水线中的各个 处理环节,当选择集流过流水线,原始文档的修改就自然而然地发生了。

    插入数据驱动环节

    d3定义选择集对象的更深层次的目的是封装数据驱动能力。通过data() 操作符,d3使数据化可视化工作者能够以一种声明式的方式指定处理流水线,从而 简化从数据到文档的处理过程:

    data-pipeline

    style()这样的操作符不同data()操作符能够改变选择集的内容。 当选择集流过style()环节后,选择集的内容没有变化,变化的是选择集中 各个DOM对象的属性。然而,当一个选择集流过data()环节后,将获得一个不同的选择集: 所包含的DOM对象发生了变化。

    each: 定制处理行为

    each()方法允许我们定制对选择集中DOM元素的处理行为:

    1. selection.each(func)

    参数func是调用者定义的函数,在d3中被称为访问器/accessor。 d3将对选择集中的每一个DOM对象,依次调用该访问器函数。

    在调用访问器函数时,d3会将this指向当前要处理的DOM对象, 并传入两个参数:

    • datum : 当前DOM对象对应的数据
    • index :当前DOM对象在集合中的序号

    可以认为访问器是d3流水线中每个处理环节用户逻辑的封装接口,d3通过这个接口, 实现了流水线框架用户处理逻辑解耦

    accessor

    几乎所有的操作符在内部实现中都使用了each(),每当d3提供的操作符 不能满足你的需求时,都不妨试一试each()

    示例演示:http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/

    参考资料:http://www.hubwiz.com/

  • 相关阅读:
    Git 多人协作开发的过程
    常见Http状态码大全
    网络请求之get post
    从前端面试过程中总结的一些经验
    HTML5新增标签
    前端小知识点--class命名规范
    前段工作第一天新知识点---handlebars.js和Seajs
    Javascript模式消息框--alert()、confirm()和prompt()的区别与用法
    用Margin还是用Padding
    Array实例对象的方法小结
  • 原文地址:https://www.cnblogs.com/hubwiz/p/4359002.html
Copyright © 2011-2022 走看看