1、D3 官网：http:/d3js.org/ 简介：D3 是一个开源的 js 框架。和 jquery 等 js 框架不同的是，D3 更侧重于数据的图形化表现。1D3 使用 html 的 dom 接口，可以选择动态选择网页中的 DOM 元素，快捷的改变其属性；选取页面元素，可以使用很多方式，包括 tag name containmentattribute values class ID注释：使用 class 和 id 选取元素的时候和 css 的用法一样。如选取 class=“divNo1”的元素可以使用 d3.select(“.divNo1”)， 选取 id=“divNo1”的元素可以使用d3.
2、select(“#divNo1”)。Ex1选取页面中所有的 P 标签元素，设置其颜色为 “white”d3.selectAll(“p“).style(“color“, “white“);Ex2选取页面中的 body 元素，并改变其背景颜色为“black”d3.select(“body“).style(“background-color“, “black“);2例 1 给出了选取页面中的 P 标签元素将标签的 color 属性全部改为“white ”，这次将给出随机给页面内元素设置颜色的方法；D3 中可以使用函数来方便实现一些用原生 js 实现起来很麻烦的地方。而且方式看起来和 jquery 等
3、矿建很相似，这个学过 jquery 的同学提供了很大的便利。Ex1选取页面内的 P 标签的元素，随机设置其颜色d3.selectAll(“p“).style(“color“, function() return “hsl(“ + Math.random() * 360 + “,100%,50%)“;);Ex2选取页面内的 P 标签的元素，随机设置其大小（ font-size 属性）d3.selectAll(“p“).data(4, 8, 15, 16, 23, 42).style(“font-size“, function(d) return d + “px“; );注释：中间的 data 区
4、的数据作为函数的第一个参数传递到函数中。一个一个的顺序被函数调用，直到结束，之后的元素将以页面默认大小设置。3D3 中的函数允许连续操作，元素选择也允许多个选择连续操作，每次的选择相当于进入到当前 DOM 节点的子树中。 Data 函数声明的数组中的数据在以后的所有函数中作为第一个参数传递进去，当前函数没有用尽 data 所声明数组中的数据的时候，剩下的数据会被顺序用到下面的函数中。Ex1选择页面中的所有的 p 标签的元素，将所有的 P 元素的 font-size 属性设置为2,4,8,16,32，然后增加三个 P 元素。d3.select(“body“).selectAll(“p“).dat
5、a(2,4,8,16,32,64,128,256).style(“font-size“,function(d)return d+“px“;).enter().append(“p“).text(function(d)return “im number “+d+“!“;);Ex2更新和增加页面内的元素。修改现有的 P 标签的内容，text 函数中的参数String 是 data 函数所声明的数据。下面的程序将页面内的 P 元素的内容依次修改为 2 8 15 16 23 42var p = d3.select(“body“).selectAll(“p“).data(4, 8, 15, 16, 23,
6、 42).text(String);Ex3增加 P 元素到页面中。下面的程序在页面中增加 P 元素，元素的内容是 data 函数声明的数据。注释：下面的程序中 data 函数声明了 7 个元素，因为页面已经存在 4 个元素，因此只新增了 3 个元素。var p = d3.select(“body“).selectAll(“p“).data(4, 8, 15, 16, 23, 56, 128);p.enter().append(“p“).text(String);Ex4删除页面上所有的 p 标签元素var p = d3.select(“body“).selectAll(“p“).data(4, 8, 15, 16, 23, 56, 128);p.remove();这是根据 D3 官网上的例子做的练习，只是想试试。更多的文档信息可以直接去 D3 的官网。文档区：https:/
