D3.js基础(1)

选择 D3：如果希望开发脑海中任意想象到的图表。
选择 Highcharts、Echarts 等：如果希望开发几种固定种类的、十分大众化的图表。

1、选择元素

可链式操作，类似jQuery，调用方是d3或dom元素

select
单选 d3.select
selectAll
多选

2、绑定数据

调用方是被选中的元素(集)

datum
绑定字符串
data
绑定数组
当选择集需要使用被绑定的数据时，常需要使用匿名函数function(d,i)。其包含两个参数，其中：
d 代表数据，也就是与某元素绑定的数据。
i 代表索引，代表数据的索引号，从 0 开始。

var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
    return "第 "+ i + " 个元素绑定的数据是 " + d;
});

3、插入元素

append
之后插入
insert
某节点之前插入

body.insert("p","#myid")
  .text("insert p element");

4、删除元素

remove

5、图表类

要绘图，首要需要的是一块绘图的“画布”，HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。
D3 虽然没有明文规定一定要在 SVG 中绘图，但是 D3 提供了众多的 SVG 图形的生成器，它们都是只支持 SVG 的。因此，建议使用 SVG 画布。

// 如下svg
<svg>
    <rect></rect>
    <rect></rect>
</svg>
// 如下js
var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
 
d3.select('svg').selectAll("rect")
    .data(dataset)
    .enter()     //指定选择集的enter部分
    .append("rect")      //添加足够数量的矩形元素
    .attr("x",20)        // 设置rect属性（x,y,width,height）
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

有数据，而没有足够图形元素的时候，enter和append结合使用可以添加足够的元素。

6、比例尺

线性比例尺
domain:定义域；range:值域

var min = d3.min(dataset);
var max = d3.max(dataset);
 // 线性比例尺 linear
var linear = d3.scale.linear()
        .domain([min, max])
        .range([0, 300]);
 
linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

序数比例尺

var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

var ordinal = d3.scale.ordinal()
        .domain(index)
        .range(color);

ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

7、坐标轴

//数据
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定义比例尺
var linear = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, 250]);
// 定义坐标轴
var axis = d3.svg.axis()
     .scale(linear)      //指定比例尺
     .orient("bottom")   //指定刻度的方向
     .ticks(7);          //指定刻度的数量
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(20,130)")
  .call(axis);

//  指定样式
<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>

8、动态图表

transition
ease
接受：
linear：普通的线性变化
circle：慢慢地到达变换的最终状态
elastic：带有弹跳的到达最终状态
bounce：在最终状态处弹跳几次
duration
delay

9、Update、Enter、Exit

Update、Enter、Exit 是 D3 中三个非常重要的概念，它处理的是当选择集和数据的数量关系不确定的情况。

10、使用on函数添加交互

var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")   //把类里的 fill 属性清空
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding )
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        })
        .attr("fill","steelblue")       //填充颜色不要写在CSS里
        .on("mouseover",function(d,i){
            d3.select(this)         // 表示选中当前元素
                .attr("fill","yellow");
        })
        .on("mouseout",function(d,i){
            d3.select(this)
                .transition()
                .duration(500)
                .attr("fill","steelblue");
        });

监听器函数中都使用了 d3.select(this)，表示选择当前的元素，this 是当前的元素，要改变响应事件的元素时这么写就好

11、布局

布局的作用是：将不适合用于绘图的数据转换成了适合用于绘图的数据。
D3 总共提供了 12 个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。
12 个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来，能够使用的布局是 11 个（有 5 个是由层级图扩展而来）。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。

参考：
http://wiki.jikexueyuan.com/project/d3wiki/