一个JS框架D3.js

        最近有点不务正业，好吧，诚恳一点面对现实。许多时候我想等我把某些问题，完全想明白，完全理解透，再写点东西；事实往往相反，发现等我真正接近，把某些东西理解好，我自己再也不屑写点东西分享了，没有精神气也好，不着调也好，这对于我的性格至少是一个事实。懂得越多的人或理解的越深的时候，人越容易沉默；半调子的时候我一直在叫嚣，就像现在的我。
        决定改变方式，不要等想好了再动笔，也不要等完全弄明白了再动笔，看点写点。
       “不要信我，否则你死得很惨！”---路碑上没有写的话。
             官方网站：http://d3js.org/

        D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能，而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式Dom操作。
         引入D3的JS库：<scriptsrc="http://d3js.org/d3.v2.js"></script>也可以下 载到本地用本地路径。
        D3允许绑定任何数据到DOM对象模型，然后应用数据驱动转换到文档。例如：你可以用D3从数组生成HTML表格，或者使用相同数据平滑和动态创建一个SVG图表。
        D3不是一个庞大的框架，像想象那样提供许多功能。相反，D3解决这关键问题：基于数据文档高效操作。避免专有的表现，同时提供良好适应性。公开全部功能，如CSS3、HTML5和SVG网页标准，很少的开销，D3速度非常快。支持大数据集和动态交互和动画效果。D3的功能设计允许代码重用，通过集合不同的组件和插件。

选定对象：Selections

传统方式

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", "white", null);
}

D3.js操作

d3.selectAll("p").style("color", "white");

D3提供很多方法来变化节点：设置属性或样式；注册时间监听器；添加，移除或整理节点；更换HTML 或文本内容。

动态属性
随机改变颜色

d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

根据奇偶变换颜色

d3.selectAll("p").style("color", function(d, i) {
  return i % 2 ? "#fff" : "#eee";
});

数据绑定，data数组中第一个元素绑定selection的第一个节点，依次类推。

d3.selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

有点不好理解，在看一个例子1-1

var circle = svg.selectAll("circle")
    .data([32, 57, 112, 293]);

运行结果：32,57,112分别绑定到三个圆上
进入和退出选定对象，例子1-2

var enter = circle.enter().append("circle");

enter.attr("cy", 90);

enter.attr("cx", 160);

enter.attr("r", function(d) {
  return Math.sqrt(d);
});

运行结果：创建一个r为293的圆

联系起来看例子1-1、1-2发现使用enter 选定对象，使用data多余293创建了一个新圆 .当data绑定selection时候，数组的每个元素都和selection中节点对应。如果节点node数量少于data，多余的data构成enter 输入。

// Update…
var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(String);

// Enter…
p.enter().append("p")
    .text(String);

// Exit…
p.exit().remove();