D3 源代码解析（二）

墨蓝 2022-02-17 06:09 348阅读 1赞

> 这是继上一篇D3源码解构文章后的对D3的研究笔记，笔者的能力有限，如有哪里理解错误，欢迎指正。

## 对集合的操作 ##

### [关于d3.attr][d3.attr] ###

一个可以处理很多情况的函数，当只传入一个参数时，如果是string，则返回该属性值，如果是对象，则遍历设置对象的键值对属性值，如果参数大于等于2，则是普通的设置样式:

var node = d3.select('body')
    
    node.attr('class')
    > 返回该属性值
    
    node.attr('class', 'haha')
    > 设置该属性值
    
    node.attr({'class': 'haha', 'x': '10'})
    > 设置该属性值

那么怎么做到一个函数处理多种情况，很明显是根据参数的数量来区别对待：

d3_selectionPrototype.attr = function(name, value) {
        if (arguments.length < 2) {
          if (typeof name === "string") {
            var node = this.node();
            name = d3.ns.qualify(name);
            return name.local ? node.getAttributeNS(name.space, name.local) : node.getAttribute(name);
          }
          for (value in name) this.each(d3_selection_attr(value, name[value]));
          return this;
        }
        return this.each(d3_selection_attr(name, value));
      };

关于getAttributeNS我们可以不用理会，对于web端，d3在设置和获取属性的时候用的都是getAttribute和setAttribute。  
对于d3\_selection\_attr函数，它返回一个通用函数，该函数会对当前对象设置对应的属性值：  
大概的思想:

function d3_selection_attr(name, value) {
      return function() {
        this.setAttribute(name, value);
      }
    }

### [selection.classed][] ###

具体用法可以看文档介绍，大概的意思是如果有键值对或者对象传入，则根据value值来添加或删除name类，否则则检测是否含有该类， 如果selection有多个，只检测第一个并返回该值

var line = d3.selectAll('line');
    line.classed('a b c d', true)
    >对所有节点设置class
    line classed({'a': true, 'b': false})
    >分别添加和删除类

和attr一样，通过对参数长度和类型的区分，执行不同的方法

d3_selectionPrototype.classed = function(name, value) {
        if (arguments.length < 2) {
          if (typeof name === "string") {
            var node = this.node(), n = (name = d3_selection_classes(name)).length, i = -1;
            if (value = node.classList) {
              while (++i < n) if (!value.contains(name[i])) return false;
            } else {
              value = node.getAttribute("class");
              while (++i < n) if (!d3_selection_classedRe(name[i]).test(value)) return false;
            }
            return true;
          }
          for (value in name) this.each(d3_selection_classed(value, name[value]));
          return this;
        }
        return this.each(d3_selection_classed(name, value));
      };

这里考虑到传入的字符串可能含有多个类名，d3\_selection\_classes函数用来分割：

return (name + '').trim().split(/^|\s+/)

这里涉及到一个小细节，先用trim过滤掉字符串两边的空白字符，然后用正则表达式去分割类名，正则表达式中的s匹配任何空白字符，包括空格、制表符、换页符等等。等价于 \[ fnrtv\]，而且还有一个^,它在这里应该是匹配第一个的意思，测试了一下，发现如果不加这个匹配的话，对于空白字符串不会返回长度为0的数组，而是会返回含有一个空字符串长度为一的数组，所以这应该是为了防止出现这种情况而做的匹配，不过原理还是不懂。对于正则的组合，暂时不理解加**^**就能防止该问题的原因。

关于匹配是否存在该类，为了防止匹配的时候发生类名为’asdf',测试的类名为'a',由于包含关系而被匹配成功，所以不能简单的使用indexOf的方法，而是要使用正则表达式去做匹配，由于类名要么在最开始，要么在中间两边有空格，要么在末尾，所以使用

new RegExp("(?:^|\\s+)" + d3.requote(name) + "(?:\\s+|$)", "g")

去做正则匹配

这里用到了(?:pattern)的方法，意思是匹配 *pattern* 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。

### [d3\_selectionPrototype.style][d3_selectionPrototype.style] ###

和attr结构类似的函数，特别在于如果传入的值是函数，则会分别对每个元素调用一次函数，并传入元素和元素的位置、优先级等

d3_selectionPrototype.style = function(name, value, priority) {
        var n = arguments.length;
        if (n < 3) {
          if (typeof name !== "string") {
            if (n < 2) value = "";
            for (priority in name) this.each(d3_selection_style(priority, name[priority], value));
            return this;
          }
          if (n < 2) {
            var node = this.node();
            return d3_window(node).getComputedStyle(node, null).getPropertyValue(name);
          }
          priority = "";
        }
        return this.each(d3_selection_style(name, value, priority));
      };

关于**样式的设置**，d3用的是style.getProperty(name)和style.setProperty(name, x, priority)  
**样式的获取**，用的是和jquery的实现方法，具体可以看看鑫大大的[文章][Link 1]，

一般我们用的是window.getComputedStyle(elem, '伪类')还有IE自娱自乐的currentStyle， 具体的细节就不说了。  
两者的不同在于getPropertyValue只能获取设置在style中的属性，而window.getComputedStyle则会得到元素最终显示在页面上的综合样式，就算没有显示声明也可以拿到，这点是最重要的区别。

### [selectionPrototype.property][]、 [selectionPrototype.text][] ###

property 给元素设置额外的属性，例如：  
node.property('bar', 'hahahaha')  
node.property('bar') // hahahaha

text 设置元素的文本，是通过element.textContent来设置文本的，之前我们设置文本和html都是通过innerText和innerHTML去设置，那么这和textContent有什么区别吗？

**实验**  
笔者测试了下在Chrome和firefox下的情况，发现最新版本的浏览器其实都是支持两者的，不过innerText并不是w3c标准，所以以前firefox并不支持innerText。

**两者的区别**

*  转义上，textContent对传入的文本如果带有n等换行符，不会忽略，而innText会忽略并转义为空格
 *  textContent会获取所有子节点的文本，而innerText不会理会隐藏节点的文本。

### [selectionProperty.html][] ###

这个没什么好讲的，封装了innerHTML的方法

### [d3\_selectionPrototype.append][d3_selectionPrototype.append] ###

比较特别的是实现的代码：

d3_selectionPrototype.append = function(name) {
        name = d3_selection_creator(name);
        return this.select(function() {
          return this.appendChild(name.apply(this, arguments));
        });
      };

函数中返回一个函数的执行结果，该执行函数中又返回一个函数的执行结果，层层嵌套却又非常聪明的做法，我们从最里面的一层看，首先对当前的节点添加子元素，然后返回该子节点元素，最后再通过select方法获取该子元素。

d3_selectionPrototype_creator(name) {
      function create() {
        return document.createElement(name);
      }
      return typeof name == 'function' ? name : create;
    }

这是简易版本的creator，d3还要考虑到在xml中的情况，xml创建子节点调用的是document.createElementNS，d3是通过namespaceURI来判断页面类型的吧，不过在[MDN][]上查询发现这个属性已经被列为废词，随时可能被废除的，查询了版本4，发现还是沿用了这个属性，这个比较危险吧。

### [d3\_selectionPrototype.insert][d3_selectionPrototype.insert] && [d3\_selectionPrototype.remove][d3_selectionPrototype.remove] ###

**insertBefore**  
同append类似，不过是封装了insertBefore的方法，注意需要用元素节点才能调用该方法，正确的调用方法是：  
existNodeParents.insertBefore（newNode, existNodeToBeInsertBefore)  
 **remove**  
很简单的实现：

function d3_selectionRemove() {
        var parent = this.parentNode;
        if (parent) parent.removeChild(this);
      }

## Data ##

### [关于d3\_selectionPrototype.data函数][d3_selectionPrototype.data] ###

这个函数是D3经常使用到也是比较关键的函数，用它来进行数据的绑定、更新，具体解析可以参考上一篇文章[D3源代码解构][D3]  
这里涉及到一个特殊的属性**data**,如果不传入参数，data会返回所有算中集合元素的属性值（property），但是为什么是通过node.\_\_data\_\_拿到的，通过搜索，终于找到了绑定该值得函数（一开始还以为是DOM的隐藏变量- -）

d3_selectionPrototype.datum = function(value) {
        return arguments.length ? this.property("__data__", value) : this.property("__data__");
      };

如果传入参数，它会创建三个特殊的私有变量，分别是

*  enter = d3\_selection\_enter(\[\])
 *  update = d3\_selection(\[\])
 *  exit = d3\_selection(\[\])  
    我们可以知道update和exit都是一个继承了d3\_selectionPrototype原型对象的数组，所以它拥有我们上面提到的selectionPrototype所有的方法，而enter比较特殊，它单独使用一套原型方法，实现方法如下：

然后调用bind函数对传入的data和key（可选）进行数据绑定，我们知道d3会根据传入的数据和已有的元素进行一一对应，一开始以为是基于什么算法去对应，看代码实现就发现如果我们不传入key参数，其实就是简单的索引对应：

而当我们传入了key后，这个时候就不一样了，D3会根据我们传入的这个函数去将元素和数据做绑定和更新、退出，这个key函数会在三次循环中分别被调用，一次是检查是否有已经绑定了数据的元素，并初始化一个映射集合，第二次进行数据绑定元素，确定update和enter集合，第三次确定exit集合。  
建议先看看官方文档，了解具体的用法在看代码会清晰很多。通俗的说，假设我们传入的数据有主键即唯一区分每个数据的属性，那么，我们便可以告诉data说用这个属性来区分，也就是：

selection.data(mydata, function(d, i) {
      return d.主键名称
    }

关于d3\_map集合可以参考[d3\_map解析][d3_map]

## Animation & Interaction （动画和交互） ##

### \[d3\_selectionPrototype.datum\]() ###

这是上面讲到的一个函数datum，可惜在data中其实没有用到，我遍历了整个代码只有一处地方调用了这个函数，它和data类似用来获取或者设置元素的值，它是基于property上进行一层封装，但是和data不同的是它没有所谓的enter、exit集合返回，那么它有什么用呢？我们可以看看这篇[文章][Link 2]

### [d3\_selectionPrototype.filter][d3_selectionPrototype.filter] ###

可以传入函数或者**选择器字符串**进行集合的过滤

### [d3的事件监听机制][d3] ###

看d3关于事件监听的实现，看到了关于JS事件的一个属性**relatedTarget**，关于JS的event对象之前接触的不多，突然看到关于这个属性，上网查找资料，才发现了这么冷门的属性：

**relatedTarget** 事件属性返回与事件的目标节点相关的节点。  
对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。  
对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。  
对于其他类型的事件来说，这个属性没有用。

怎么样，够冷门吧，只对两种事件生效

还有一个方法叫做**compareDocumentPosition**，比较两个节点，并返回描述它们在文档中位置的整数  
1：没有关系，两个节点不属于同一个文档。  
2：第一节点（P1）位于第二个节点后（P2）。  
4：第一节点（P1）定位在第二节点（P2）前。  
8：第一节点（P1）位于第二节点内（P2）。  
16：第二节点（P2）位于第一节点内（P1）。  
32：没有关系，或是两个节点是同一元素的两个属性。  
注释：返回值可以是值的组合。例如，返回 20 意味着在 p2 在 p1 内部（16），并且 p1 在 p2 之前（4）。

知道了这两个属性，d3的一个函数就看懂了：

获取事件对应的对象和相关的对象，如果**不存在相关的对象**或者**相关的对象不等于当前对象且相关对象不在当前对象之内**，则执行监听函数。

这个函数返回一个函数，返回的函数绑定了当前对象并执行。

D3还做了一个事件 映射，将mouseenter映射为mouseover，mouseleave映射为mouseout，然后判断环境中是否有这两个事件，如果有的话就取消这个映射。

以上三段代码都是为了处理执行环境中没有mouseenter和mousemove情况下如何利用mouseover和mouseleave去实现相同效果的问题。然后通过下面这个函数来判断：

现在再来看这个函数就可以看懂了，首先它判断传入的事件类型是否含有'.'，因为D3在实现事件绑定时，会清除同种事件类型之前绑定的监听函数，所以对于同一类型的事件，如果要绑定多个监听函数，那么就需要使用**click.foo**\**click.bar*\*这种方式去进行区分，防止旧的事件被覆盖掉，查看onAdd函数就可以知道每次添加事件监听的时候，就会调用onRemove去清除该事件监听。

关于capture，默认是false，表示在冒泡阶段响应事件，如果设置为true，则是在捕获阶段响应事件，可以参考这篇[文章][Link 3]，这是历史遗留原因，好像当初的浏览器响应事件的设置不是冒泡阶段，而是捕获阶段，后来为了兼容而给了这个参数。

好了，懂得了D3事件绑定的原理，那么实现这个函数就很容易，一样的根据参数的数量和类型做不同的处理就好了：

d3_selectionPrototype.on = function(type, listener, capture) {
        var n = arguments.length;
        if (n < 3) {
          if (typeof type !== "string") {
            if (n < 2) listener = false;
            for (capture in type) this.each(d3_selection_on(capture, type[capture], listener));
            return this;
          }
          if (n < 2) return (n = this.node()["__on" + type]) && n._;
          capture = false;
        }
        return this.each(d3_selection_on(type, listener, capture));
      };

### \[d3.mouse\]() ###

[MDN上关于svg的一些属性][MDN_svg]  
[一篇关于svg的讲解][svg]  
[关于svg坐标转换为屏幕坐标][svg 1].aspx)  
[关于使用矩阵转换的实现][Link 4]  
我们要知道一些新的属性：

*  【**ownerSVGElement**】，用来获取这个元素最近的svg祖先，没有的话就返回元素本身。
 *  【**svg.createSVGPoint**】这个函数不在MDN中，看下MF的[介绍][Link 5].aspx)，大概意思是初始化一个不在document文档内的坐标点
 *  【**getScreenCTM**】

当我们获取网页上鼠标的坐标点的时候，可以很简单地调用e.clientXY,或者e.pageXY，但是svg有自己的一套坐标系，它可以自身旋转、平移，所以我们想知道按钮点击的位置相对于svg元素的位置时，需要考虑这些因素，从而使得获取鼠标在svg的位置时变得没那么容易，再加上各种浏览器的坑……  
这个时候就是线性代数就用上了（感谢线代老师！），忘的差不多的可以参考上面的几篇文章，svg自身已经提供了对应的矩阵运算，节省了我们的一些实现的代码。  
再看看D3的代码，就知道原作者也是被坑过的：

clientX是获取相对于浏览器屏幕的坐标，减去元素相对于屏幕的左边距，为了兼容IE等坑爹的默认开始位置为（2,2），减去container的clienLeft，最终得到svg的鼠标位置，但真的是为了获取相对的位置么，需要再看看。

## Behavior ##

### \[d3的touch、drag、touches\]() ###

看不太懂这几个的实现，和自己没有怎么使用到这几个函数有关吧

### \[d3.zoom\]() ###

zoom函数的实现，大概知道它通过绑定mouseWheel事件去记录了放缩的值、中心、放缩位置等。也是涉及到event的绑定，表示hin晕。

### [D3的颜色空间][D3 1] ###

具体可以参考前一篇[文章][Link 6]

### [d3.xhr][] ###

D3对于ajax的实现，没有兼容IE6及6以下的**xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");**  
只考虑了window.XMLHttpRequest,因为老版本的IE压根就无法正常使用各种图形和动画。

### [D3的timer的实现有点厉害][D3_timer] ###

当我们要用D3实现一个永久循环的动画的时候，就可以使用timer函数，向这个函数传入一个函数，timer函数会在每个动画针中调用传入的函数直至该函数返回‘true’，所以只要我们始终不返回true就好了。  
如果是这么简单当然就好实现了，但是如果有多个timer怎么去控制呢？这个问题导致了实现的方法复杂了很多，直接上代码：

var d3_timer_queueHead, d3_timer_queueTail, d3_timer_interval, d3_timer_timeout, d3_timer_frame = this[d3_vendorSymbol(this, "requestAnimationFrame")] || function(callback) {
        setTimeout(callback, 17);
      };
      d3.timer = function() {
        d3_timer.apply(this, arguments);
      };
      function d3_timer(callback, delay, then) {
        var n = arguments.length;
        if (n < 2) delay = 0;
        if (n < 3) then = Date.now();
        var time = then + delay, timer = {
          c: callback,
          t: time,
          n: null
        };
        if (d3_timer_queueTail) d3_timer_queueTail.n = timer; else d3_timer_queueHead = timer;
        d3_timer_queueTail = timer;
        if (!d3_timer_interval) {
          d3_timer_timeout = clearTimeout(d3_timer_timeout);
          d3_timer_interval = 1;
          d3_timer_frame(d3_timer_step);
        }
        return timer;
      }
      
      function d3_timer_step() {
        var now = d3_timer_mark(), delay = d3_timer_sweep() - now;
        if (delay > 24) {
          if (isFinite(delay)) {
            clearTimeout(d3_timer_timeout);
            d3_timer_timeout = setTimeout(d3_timer_step, delay);
          }
          d3_timer_interval = 0;
        } else {
          d3_timer_interval = 1;
          d3_timer_frame(d3_timer_step);
        }
      }
      // 立即执行时间队列，然后清洗掉已经结束的事件。
      d3.timer.flush = function() {
        d3_timer_mark();
        d3_timer_sweep();
      };
      // 遍历时间队列，如果回调函数返回真，则将该事件的回调赋值为空，然后继续检查下一个，最后返回当前时间。
      function d3_timer_mark() {
        var now = Date.now(), timer = d3_timer_queueHead;
        while (timer) {
          if (now >= timer.t && timer.c(now - timer.t)) timer.c = null;
          timer = timer.n;
        }
        return now;
      }
      // 时间事件队列的清洗，循环遍历队列中的时间对象，如果回调函数为空，去掉，否则检测下一个，最后返回最近要执行的事件时间点。
      function d3_timer_sweep() {
        var t0, t1 = d3_timer_queueHead, time = Infinity;
        while (t1) {
          if (t1.c) {
            if (t1.t < time) time = t1.t;
            t1 = (t0 = t1).n;
          } else {
            t1 = t0 ? t0.n = t1.n : d3_timer_queueHead = t1.n;
          }
        }
        d3_timer_queueTail = t0;
        return time;
      }

D3使用队列的方法实现，每次有新的timer进来，判断队列是否为空，如果为空，就将Head和队尾指向它，否则，将队尾和队尾的下一个指向它

if (d3_timer_queueTail) d3_timer_queueTail.n = timer; else d3_timer_queueHead = timer;
        d3_timer_queueTail = timer;

感谢C和C++，告诉我指针实现链表的概念！

然后开始执行回调函数。

if (!d3_timer_interval) {
          d3_timer_timeout = clearTimeout(d3_timer_timeout);
          d3_timer_interval = 1;
          d3_timer_frame(d3_timer_step);
        }

timer\_frame的实现是兼容了老版本的浏览器没有 **requestAnimationFrame** 而退而使用**setTimeout**去实现，如果不太清楚这个api的同学可以看看鑫旭的这篇[文章][Link 7]或者上MDN查。  
然后每个帧都会调用d3\_timer\_step这个函数，它调用了d3\_timer\_mark和d3\_timer\_sweep函数，循环遍历了一遍时间队列，然后获取最近的待执行的时间点，得到了delay时间差，当时间差大于24并且不为Infinity的时候，便重新设置时间器，让其在delay ms后执行，减少性能的消耗，若为Infinity，表示没有时间事件等待调用，停止了递归，否则，delay小于24ms，递归调用d3\_timer\_frame。

那么为什么为24ms呢？我们知道浏览器的最佳动画帧是60fbps，算起来每一帧的间隔为1000/60 = 16.7ms,所以如果使用setTimeout实现动画针的话，d3选择的时间间隔是17ms，因为太小的话会出现掉帧的情况，那么这个和24有什么关系呢？为什么要设定为24呢？我也不清楚...在github上面提交了[issues][]，不知道会不会有人解答，好紧张。  
关于timer的一些扩展:  
[timer实现永久动画][timer]  
[作者的实现][Link 8]

*早上提交的issue下午原作者就给了[回复][issues]，不过作者的解释就尴尬了，大概的意思就是由于setTimeout的不稳定和不准确，存在一定的延迟，所以在设定这个值的时候也是拍脑袋设置的，值刚好在16.7到33.4之间，并回复说左右偏移都不会有什么影响就对了。*

### \[d3关于number 的方法：formatPrefix 和 round\]() ###

提供了将number转化为特定格式的字符串方法，基于正则表达做匹配，然后对应地做转化。这部分的实现比较琐碎，就没去仔细研究了，有兴趣的可以看看。

### \[d3.time\]() ###

同样的，将d3.time初始化为一个空对象，并且将window.Date对象设置为私有变量：d3\_date = Date  
万物皆为我所用！  
首先我们要了解Date的UTC函数，UTC() 方法可根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。  
然后来看这个函数：

function d3_date_utc() {
        this._ = new Date(arguments.length > 1 ? Date.UTC.apply(this, arguments) : arguments[0]);
      }

这个函数是一个构造函数，当我们new d3\_date\_utc(xxx)的时候，它会创建一个日期对象，并根据我们传入的参数数量去创建，如果我们传入的参数多余1个，那么很显然我们传入的是年月日这些参数，那么便调用 **Date.UTC.apply**去返回时间戳，如果参数只有一个的话，那就直接返回咯，那么参数为0会怎么样？  
我们可以实践下，相当于new Date(undefined),返回的结果是 Invalid Date的Date对象。  
为什么能肯定是Date对象呢，我们使用instanceof Date去测试，发现结果为true，那么当我们打印出来为什么为Invalid Date呢，很明显，它调用了 toString方法或者valueOf()方法，经过测试是toString方法，valueOf方法返回的是NaN。  
好了，扩展就到这里，继续看下去，  
有了构造函数，那么怎么可以没有原型对象呢，来了：

d3_date_utc.prototype = {
      getDate: function() {
        return this._.getUTCDate();
      ,
      getDate: function() {
        return this._.getUTCDay();
      },
      ...
    }

可以看到，D3封装了原始Date对象的一些方法，例如getDay和GetHours等，它不适用原生的Date.getDay  
等，而是使用getUTCDay去拿，那么这两者有什么不一样吗？  
当你new一个Date对象的时候，返回的是本地的时间，注意，是你所在时区的时间哦，所以假设你现在的时间是  
Tue Jul 19 2016 14:44:19 GMT+0800 (中国标准时间)  
那么当你使用getHours的时候，返回的时间是14，但是，当你使用getUTCHours的时候，它返回的是全球的时间，什么叫全球？请参考[MDN][MDN 1]上关于这个函数的解释：

> The \*\*getUTCHours()

\*\* method returns the hours in the specified date according to universal time.

它的意思是会参考0时区的时间来给你时间，由于我们所处的地方（中国）是在8时区，所以在0时区比我们这里早8个小时，所以他们那边现在还是早晨8点正在洗脸刷牙吃早餐。

所以这个对象封装了Date对象的UTC方法，变成一个全球流的时间器，然后它的方法不再需要添加UTC这个名字就可以调用了，其实我们也可以做到。

接下来是几个函数的声明和定义：

暂时不看这个函数里面的函数是做什么的，首先d3\_time\_interval这个函数接受三个参数，然后对传入的local参数，我们给了它五个方法，分别是我们定义的五个方法，然后又给local定义个utc的属性，这个属性还额外拥有五个方法，最后返回了这个local对象，可以看出来这个函数是一个包装器，对传入的local对象进行包装，让它拥有固定的方法，接下来看下一个函数：

一个返回函数的函数，这是在类库里面经常见到的用法，我经常被它给迷醉，能用的好能创造出很奇妙的作用。看代码我们仍然不知道具体是做什么的，不急，继续往下看

d3_time.year = d3_time_interval(function(date) {
        date = d3_time.day(date);
        date.setMonth(0, 1);
        return date;
      }, function(date, offset) {
        date.setFullYear(date.getFullYear() + offset);
      }, function(date) {
        return date.getFullYear();
      });

我们知道d3\_time就是d3.time对象，是一个空对象目前，这里开始给它添加属性了，并且调用了上面的d3\_time\_interval函数，向它传入了三个函数，d3没有注释就是惨，完全不知道传入的参数类型，这点以后写代码需要注意

后面的一部分主要有针对传入的参数对时间进行不同的格式化等等

### [d3.geo][] ###

d3的图形化算法的实现，这一部分涉及到了几何、数据结构等方面的知识，大概三千多行的代码量，基本是各种符号和公式，没有注释的话看起来和天书没有区别，需要单独花时间来慢慢看了。

### \[d3.interpolate\]() ###

接下来的是d3关于不同类型的插值的实现  
首先是颜色：**d3.interpolateRgb**

d3.interpolateRgb = d3_interpolateRgb;
      function d3_interpolateRgb(a, b) {
        a = d3.rgb(a);
        b = d3.rgb(b);
        var ar = a.r, ag = a.g, ab = a.b, br = b.r - ar, bg = b.g - ag, bb = b.b - ab;
        return function(t) {
          return "#" + d3_rgb_hex(Math.round(ar + br * t)) + d3_rgb_hex(Math.round(ag + bg * t)) + d3_rgb_hex(Math.round(ab + bb * t));
        };
      }

颜色的插值实现其实没有什么技巧，就是分别取rgb三个值做插值，然后再将三种颜色合并为一种颜色，以后可以自己实现一个颜色插值器了。

除了颜色，还有对对象的插值实现：

d3.interpolateObject = d3_interpolateObject;
      function d3_interpolateObject(a, b) {
        var i = {}, c = {}, k;
        for (k in a) {
          if (k in b) {
            i[k] = d3_interpolate(a[k], b[k]);
          } else {
            c[k] = a[k];
          }
        }
        for (k in b) {
          if (!(k in a)) {
            c[k] = b[k];
          }
        }
        return function(t) {
          for (k in i) c[k] = i[k](t);
          return c;
        };
      }

遍历两个对象，用i存储两个对象都有的属性的值的插值，用c来存储两个对象各自独有的属性值，最后合并i到c中，完事。

D3还实现了字符串的插值，不过不是对字符的插值，而是检测字符串的数字做插值，对传入的参数a和b，每次检测到a中的数字，便到b中找对应的数字然后做插值，如果a的数字找不到对应，就会被抛弃，a中的其他字符串都会被抛弃，只保留b中的字符串。

/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g

匹配数字的正则表达式

除了d3本身提供的这些插值器外，我们也可以[自定义插值器][Link 9]

d3.interpolate = d3_interpolate;
      function d3_interpolate(a, b) {
        var i = d3.interpolators.length, f;
        while (--i >= 0 && !(f = d3.interpolators[i](a, b))) ;
        return f;
      }
      d3.interpolators = [ function(a, b) {
        var t = typeof b;
        return (t === "string" ? d3_rgb_names.has(b.toLowerCase()) || /^(#|rgb\(|hsl\()/i.test(b) ? d3_interpolateRgb : d3_interpolateString : b instanceof d3_color ? d3_interpolateRgb : Array.isArray(b) ? d3_interpolateArray : t === "object" && isNaN(b) ? d3_interpolateObject : d3_interpolateNumber)(a, b);
      } ];

d3会自己循环遍历插值器队列，直到有插值器返回了对应的对象。

### \[d3.ease\]() ###

d3.ease实现了多种动画函数，开发者可以根据自身的需要调用不同的动画效果，具体的示例可以参考这篇[文章][Link 10]

### [d3.transform][] ###

d3只涉及到平面上的转化，tranform包含四个属性：rotate、translate、scale、skew（斜交），transform也是一个变化，所以也可以作为插值器，[关于csstransform的文档][csstransform]

[d3.attr]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#attr
[selection.classed]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#classed
[d3_selectionPrototype.style]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#style
[Link 1]: http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
[selectionPrototype.property]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#property
[selectionPrototype.text]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#text
[selectionProperty.html]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#html
[d3_selectionPrototype.append]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#append
[MDN]: https://developer.mozilla.org/en-US/docs/Web/API/Node/namespaceURI
[d3_selectionPrototype.insert]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#insert
[d3_selectionPrototype.remove]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#remove
[d3_selectionPrototype.data]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#data
[D3]: https://segmentfault.com/a/1190000005893218#articleHeader10
[d3_map]: https://segmentfault.com/a/1190000005893218#articleHeader9
[Link 2]: http://bl.ocks.org/mbostock/1323729
[d3_selectionPrototype.filter]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#filter
[d3]: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#on
[Link 3]: http://my.oschina.net/u/1454562/blog/205010
[MDN_svg]: https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
[svg]: http://blog.iderzheng.com/something-about-svg-with-javascript/
[svg 1]: https://msdn.microsoft.com/library/hh535760%28v=vs.85
[Link 4]: http://svgdiscovery.com/E/Ed.htm
[Link 5]: https://msdn.microsoft.com/library/ff972165%28v=vs.85
[D3 1]: https://github.com/d3/d3-3.x-api-reference/blob/master/Colors.md
[Link 6]: https://segmentfault.com/a/1190000005893218#articleHeader11
[d3.xhr]: https://github.com/d3/d3-3.x-api-reference/blob/master/Requests.md#d3_xhr
[D3_timer]: https://github.com/d3/d3-3.x-api-reference/blob/master/Transitions.md#d3_timer
[Link 7]: http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/
[issues]: https://github.com/d3/d3/issues/2910
[timer]: http://jsfiddle.net/christopheviau/kmjKQ/
[Link 8]: http://bl.ocks.org/mbostock/3808234
[MDN 1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
[d3.geo]: https://github.com/d3/d3-3.x-api-reference/blob/master/Geo.md
[Link 9]: https://github.com/d3/d3-3.x-api-reference/blob/master/Transitions.md#d3_interpolators
[Link 10]: http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm
[d3.transform]: https://github.com/d3/d3-3.x-api-reference/blob/master/Transitions.md#d3_interpolateTransform
[csstransform]: https://www.w3.org/TR/css-transforms-1/#matrix-decomposition