d3.js
d3.js是基于数据操作文档的js库，集强力可视化组建与数据驱动型的dom操作手法于一身。
本质上是js，在数据可视化方面，d3将生成可视化的步骤精简到了几个简单的函数。
来源：http://d3.decembercafe.org/pages/lessons/1.html
安装及使用
使用d3
- 下载d3.js的文件 在html文件中包含即可
-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
预备知识
- html：设定网页内容
- css：设定网页样式
- javascript：设定网页行为
- dom：修改文档的内容和结构
- svg：缩放矢量图形，用于绘制可视化的图形
ide for mac
- IntelliJ IDEA
- Pycharm
d3语法
链式语法
d3.select("body").selectAll("p").text("hello world");
选择数据
使用d3.select()``````d3.selectAll()选择元素后返回的对象就是选择集
d3.select()：选择所有指定元素的第一个d3.selectAll()：选择指定元素的全部- 选择某个元素：
- 加id号 select("#myid");
- 选择其中几个元素：
- 添加class selectAll(".myclass");
- 对于已经绑定数据的选择集，可以运用无名函数function(d,i)，d为绑定的数据，i为索引号，可以用条件判定语句来选择元素。
绑定数据
绑定到dom上
- p.datum(data)：绑定一个数据data到选择集p上
- p.data(dataset)：绑定一个数组到选择集上，数据的各项值分别与选择集的各元素绑定
插入元素
- body.append(“p”) ：在body的末尾添加一个p元素
- body.insert(“p”,"#myid")：body中id为myid的元素前添加一个p元素
删除元素
var p=body.select("#myid");
p.remove();
做图表
画布
SVG
可缩放矢量图形，用于描述二维矢量图形的一种图形格式，使用xml格式来定义图形，可以直接嵌入html中显示。
特点：
- 矢量图，放大不失真
- 基于xml，可为每个元素添加javascript事件处理器
- 每个图形军事为对象，更改对象的属性，图形也会改变
- 不适合游戏
预定义元素
矩形
<rect>
属性：
- x ：矩形左上角的x坐标，x轴水平向右
- y ：矩形左上角的y坐标，y轴垂直向下
- width ： 矩形的宽度
- height ：矩形的高度
圆形
<circle>
属性：
- cx：圆心x坐标
- cy：圆心y坐标
- r：半径
椭圆
线段
<line>
属性：
- stroke：颜色
- strock-width：宽度
折线
多边形
路径
<path>
属性:
- d：
分组元素
<g>
文字
<text>
生成器
弧生成器
var arc=d3.svg.arc()
.innerRadius(0)//内半径
.outerRadius(150);//外半径
Canvas
canvas是通过js来绘制2d图形
特点:
- 位图，放大后会失真
- 不支持事件处理器
- 能以.png .jpg保存图像
- 适合游戏
图形操作
建议用svg，因为d3提供了众多svg图形的生成器
添加画布
var svg = d3.select("body").append("svg").attr("width",300).attr("height",300);
绘制矩形
矩形的属性
var dataset = [250,210,170,130,90];
var rectHeight = 25;
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",20)
.attr("y",function(d,i){
return i*rectHeight;
})
.attr("width",function(d){
return d;
})
.attr("height",rectHeight-2)
.attr("fill","steelblue");
- enter() ：有数据而没有足够的图形元素时，可以使用此方法添加足够的元素
比例尺
将某一区域的值映射到另一个区域，其大小关系不变
线性比例尺
var min=d3.min(dataset);
var max=d3.max(dataset);
var linear=d3.scale.linear()//线性比例尺
.domain([min,max])//定义域
.range([0,300]);//值域
返回值可以当函数用
序数比例尺
var ordinal=d3.scale.ordinal()
.domain(index)
.range(color);
颜色比例尺
var color=d3.scale.categroy();//有10种颜色的比例尺
坐标轴
svg中没有坐标轴，但是有组件 d3.svy.axis()
定义坐标轴
var axis=d3.svg.axis()
.scale(linear)//指定比例尺
.orient("bottom")//指定刻度的朝向
.ticks(7);//指定刻度数量
添加坐标轴
svg.append("g").call(axis); //call()价格当前选择集作为参数传递给此函数
与
axis(svg.append(g));
等价
设定坐标轴的位置
svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)")//坐标轴的位置
.call(axis);
动态效果
transition()
启动过渡效果
.attr("fill",red)
.transition()
.attr("fill",blue)
duration()
指定过渡的持续时间，参数为时间，单位为毫秒
ease()
指定过渡的方式
ease(“bounce”)
- linear：普通线性变化
- circle：慢慢到达变换的最终状态
- elastic：带有弹跳的到达最终状态
- bounce：在最终状态弹跳几次
delay()
指定延迟事件，一定时间后才开始转变，单位为毫秒
update, enter, exit
绑定的数据和元素个数不符，分为两个部分分别处理
交互操作
在d3中每个选择集都有一个on函数用于添加事件监听器
鼠标事件
- click：鼠标单机某元素（mousedown+mouseup）
- mouseover：光标放在某元素上
- mouseout：光标从某元素上移出来
- mousemove：鼠标被移动
- mousedown：鼠标被按下
- mouseup：鼠标按钮被松开
- 双击：没有 click+延迟判定来模拟（还不会）
键盘事件
- keydown：按下任意键触发
- keypress：按下字符键触发
- keyup：释放键触发
触屏
- touchstart：触摸点放在触摸屏上时
- touchmove：触摸点移动
- touchend：触摸点拿开
布局
布局的作用就是计算出适合于作图的工具
Bundle
Chord
Cluster
Force 力导向图
var nodes = [ { name: "桂林" }, { name: "广州" },
{ name: "厦门" }, { name: "杭州" },
{ name: "上海" }, { name: "青岛" },
{ name: "天津" } ];
var edges = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } ,
{ source : 0 , target: 3 } , { source : 1 , target: 4 } ,
{ source : 1 , target: 5 } , { source : 1 , target: 6 } ];
var force = d3.layout.force()
.nodes(nodes) //指定节点数组
.links(edges) //指定连线数组
.size([width,height]) //指定作用域范围
.linkDistance(150) //指定连线长度
.charge([-400]); //相互之间的作用力
force.start(); //开始作用
Histogram
Pack
Partition
Pie 饼图
var pie=d3.layout.pie();
var piedata=pie(dataset);