D3JS

d3.js是一个对数据进行可视化的JavaScript库。d3使用标准的web技术（HTML、SVG、CSS）

  • nvd3是基于d3做的，api风格与d3也是一致的，需要对d3的api很熟悉，最好能系统的看一遍d3的api，不用熟悉每一个方法，但是心里要有个大概印象，知道d3提供了哪些功能，需要使用的时候可以查看具体细节，也可以防止不知道d3的功能而去重复造轮子。
  • 将数据可视化的基本流程：1、用什么可视元素来表现数据？ 2、数据对应到可视元素的什么属性？
  • 将数据以图形的方式表现出来，这个过程就是数据可视化。
  • d3.js是一个基于集合概念的DOM操作库：d3依赖于选择符选中一组元素，建立一个集合，然后使用集合对象的方法操作DOM。
  • d3.js的大量功能集中在数据处理方面：要将数据映射到图形，有很多琐碎的工作，比如数据范围的变换、插值的计算、布局的计算等等。d3.js的大量功能是集中在这样的数据处理方面的。
  • d3将数据可视化抽象为数据与可视化元素的匹配，一个数据对应一个可视化元素，一个数值对应一个可视化元素的属性。d3封装了这个匹配的复杂过程，让我们得以简单的通过声明数据和可视化元素来完成数据可视化的任务。
  • 在HTML文件中引入d3.js后，我们就获得了一个全局变量：d3。d3.js的功能就通过这个对象暴露出来。d3.js实现数据可视化的典型理念：基于集合运算的声明式的数据可视化。
  • 请你注意使用d3时经典的四把斧：d3总是要求使用者声明两个集合：DOM对象集和数据集，并根据集合运算实施数据与DOM对象的匹配，最后通过修改匹配的DOM对象来获得可视化的效果。


  • d3第1斧：声明DOM对象集—d3的数据可视化流程总是从选中一组DOM元素建立一个集合对象开始。d3允许声明一个空集合。因为d3还有第2斧，用数据来影响这个空集合。
  • d3第2斧：声明数据集—data()方法执行时对数据集和DOM元素集进行了匹配计算，直接返回的结果就是两个集合的共有部分。匹配计算的结果有两个重要的方法，让我们可以获得数据集和DOM元素集的差异在哪里：1、enter(): 获得数据集中比DOM元素集中多出来的数据。2、exit()：获得DOM元素集中比数据集中多出来的数据。
  • d3第3斧：获得结果集—继续使用集合的enter()方法，我们可以获取缺失的DOM对象集合（以数据集为对比基准）。
  • d3第4斧：实施DOM操作—使用集合的append()方法，我们创建缺失的DOM对象。var selection4 = selection3.append(“div”);这时selection4已经是有8个div元素的集合了，在这个集合上我们使用text()方法设置每个元素的文本内容。
  • 选择集/selection是d3中的核心对象，用来封装一组从当前HTML文档中选中的元素。d3提供了两个方法用来创建selection对象：1、select(selector):只使用第一个匹配的元素创建选择集。2、selectAll(selector):使用全部匹配的元素创建选择集。为什么需要选择集？d3定义选择集对象的一个目的是封装对DOM的操作。选择集提供了众多的方法(d3称之为操作符/operator)来进行DOM操作。有趣的是，d3的选择集对象和jQuery对象一样，也具有链式调用的能力。绝大多数的选择集操作符返回的结果还是一个选择集(可能和最初的选择集内容不一样)。
  • each: 定制处理行为，each()方法允许我们定制对选择集中DOM元素的处理行为。selection.each(func)：在调用访问器函数时，d3会将this指向当前要处理的DOM对象， 并传入两个参数：1、datum : 当前DOM对象对应的数据；2、index ：当前DOM对象在集合中的序号。几乎所有的操作符在内部实现中都使用了each()，每当d3提供的操作符不能满足你的需求时，都不妨试一试each()。
  • style: CSS样式操作符，如果没有指定参数value，那么style()将返回选择集中第一个DOM元素指定样式的计算值。请注意，这时只返回第一个元素的样式！
  • append：追加操作符，append()操作符向选择集中的每一个DOM元素追加一个子元素，append()返回的是一个不同的选择集，其内容是新追加的这些DOM元素。remove：删除操作符，remove()方法将选择集中的全部DOM元素从当前文档中移除，需要指出的是，remove()操作符并没有销毁这些移除的DOM元素，而仅仅是将它们从当前文档中摘除，所返回的选择集内容没有发生变化。
  • selection.on：事件监听操作符，selection.on(type[,listener[,capture]])：参数listener是可选的，如果未指定该参数，则on()调用返回type类型的当前监听函数。注册多个监听函数，如果在同一个DOM对象上已经注册有type类型的监听函数，那么再次调用on()进行注册将移除之前注册的监听函数。如果需要对一种事件注册多个监听函数，可以在事件类型名称后增加一个可选的命名空间，比如：”click.foo”、”click.bar”。
  • d3使用一个全局变量来提供DOM事件对象：d3.event。d3.event仅在监听函数中有效。每当事件触发时，d3就将DOM事件对象赋给d3.event，并在监听器处理完之后将其清理。preventDefault()来禁止浏览器对某个事件的默认行为、stopPropagation()来阻止事件的冒泡行为。
  • 在d3中，可视化元素可以是HTML元素或者SVG元素。
  • data：数据操作符，在d3的处理流水线中，data()操作符使用数据来修剪选择集中的DOM元素。

    选择集的data()操作符执行后返回的是一个新的选择集，其内容是与数据集匹配的DOM对象。在图中，data()使用数据集[10,34]与选择集中的DOM对象按顺序号依次匹配，并将数字存入对应DOM对象的data属性。显然，第3个div元素没有对应序号的数据，所以返回的选择集中不包括这个DOM对象。
  • enter：获得未匹配数据，如果数据集中的数据比选择集中的DOM元素多，data()会将这部分数据单独保存，并通过enter()方法提供出来。注意enter()返回的也是一个选择集对象，只是这个选择集不包含任何DOM元素，可将其视为仅包含数据值的伪选择集。
  • exit：获得未匹配的DOM元素，同样的，如果数据集中的数据比选择集中的DOM元素少，data()会将这部分多出来的DOM元素单独保存，并通过exit()方法提供出来。
  • 在d3中，数据集是使用数组/array来指定的。最简单的数组是一组数值，比如：[12.34,27.29,29.39,12.38]。这些数值可以直接映射成可视化元素的一个属性值（或许需要一些必要的比例缩放，以便能看得清楚）。
  • 转场是一种过渡，提供两个稳定状态间的一种动态渐进的变化。使用选择集的transition()方法为当前选择集启动一个转场效果。转场也是一个集合对象。和选择集/selection一样，转场效果/transition也是一个集合对象：包含一组DOM元素。转场也有一些和选择集一样的操作符，比如attr()、style()和text()等，用来对所管理的DOM元素进行属性的修改。和选择集不同的是，转场对象对DOM元素的修改不是立即完成的，它会对每个DOM元素启动一个17ms间隔的定时器用来逐步地修改DOM元素的属性。
  • tween：定制转场计算过程。
    ```html
    //tween工厂函数定义
    function factory(datum,index){
    //this指向当前DOM对象
//返回tween函数，将在每帧时每个DOM对象上被调用
return function(t){
//在这里修改DOM元素的属性
};
    }
    ```html
  • easing：控制动画的速度。d3中easing就是这个意思，通过调整时间的映射，来影响tween的执行效果。预置的ease效果：linear、bounce、back…
  • 对于HTML元素，我们通常使用style()操作符来指定显示效果，很少使用attr()操作符。而SVG元素，有些效果必须设置在属性上，所以，在使用SVG做可视化元素时，经常会使用attr()操作符。
  • Scalable Vector Graphics是一个成熟的W3C标准，被设计用来在web和移动平台上展示可交互的图形。和HTML类似，SVG也支持CSS和JavaScript。尽管可以使用HTML展示数据，SVG才是数据可视化领域的事实标准。
  • 为了在自动化的数据处理流水线中使用path元素，d3引入了构造器/generator，这些构造器的功能，就是根据你给定的一些参数，生成path元素所需要的d属性值。曲线构造器、区域构造器、圆弧构造器。
  • 我们可以使用d3.svg.line()方法创建一个曲线构造器。曲线构造器（注意，这指的是line()返回的结果）是一个函数，它要求调用者传入一个数组。默认情况下，数组的每一项应当是一个包含x、y坐标的数组，第一个值代表x，第二个值代表y。
  • 定义插值策略：使用intepolation()方法，可以告诉构造器使用不同的插值策略。
  • 圆弧构造器要求数组中的每一项为一个JSON对象，有以下属性：startAngle、endAngle、innerRadius、outerRadius。定制区域构造器的行为、定制圆弧构造器的行为。
  • 比例尺：数据集的值范围和可视化元素的显示范围经常是不匹配的，这需要我们对数据进行一些预处理。myscale函数实现了将数据从一个值范围，映射变换到另一个值范围的功能，这个映射，就是d3中比例尺的含义，而原始值范围，在d3中被称为域/domain，变换值范围则被称为范围/range。线性比例尺、指数比例尺、对数比例尺、时间比例尺、分类比例尺。
  • 线性比例尺：线性比例尺对连续值输入数据进行线性变换。1、创建：线性比例尺是最常用的定量比例尺，d3提供一个对象工厂scale.linear()用来创建线性比例尺对象。2、设置输入域：使用线性比例尺对象的domain()方法设置输入值范围。3、设置输出范围：使用线性比例尺对象的range()方法设置输出值范围。4、使用：线性比例尺对象是一个函数，调用这个函数时，传入的参数就是原始值，返回的结果就是变换后的值。
  • 分类比例尺：d3的分类比例尺用来对离散型数据进行映射，输入域中的数据总是按顺序映射到输出域。
  • 预置比例尺(调色板)—很多时候我们需要使用颜色来区分不同的数据。对于离散型数据，d3提供了一组预置的分类比例尺，方便我们将不同的值映射到不同的颜色。d3.scale.category10()等效于d3.scale.ordinal().range([“#1f77b4”,”#ff7f0e”,”#2ca02c”,”#d62728”,”#9467bd”,”#8c564b”,”#e377c2”,”#7f7f7f”,” #bcbd22”,”#17becf”])。

Comments

去留言
2017-02-05
⬆︎TOP