D3入门

基础API

选择元素

d3.select()

选择所有指定元素的第一个

d3.selectAll()

选择指定元素的全部

绑定元素

data()

绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

dataum()

绑定一个数据到选择集上

function(d, i){ }

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

插入元素

append()

• 1

在选择集末尾插入元素

insert()

在选择集前面插入元素

删除元素

remove()

添加画布

var svg = d3.select("body")     //选择文档中的body元素
            .append("svg")  //添加一个svg元素
            .attr("width", 300)  //设定宽度
            .attr("height", 300); //设定高度

绘制矩形

var dataset = [ 250 , 210 , 170 , 130 , 90 ]; 
svg.selectAll("rect")   //选择svg内所有的矩形
   .data(dataset)  //绑定数组
   .enter()        //指定选择集的enter部分
   .append("rect") //添加足够数量的矩形元素

有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。

矩形的属性，常用的有四个：

• x - 矩形左上角的 x 坐标
• y - 矩形左上角的 y 坐标
• width - 矩形的宽度
• height - 矩形的高度

注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。

比例尺缩放

d3.scaleLinear()

返回一个线性比例尺

domain()
range()   

设定比例尺的定义域和值域

d3.max()
d3.min()

求数组的最大值和最小值

线性比例尺

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scaleLinear()
               .domain([min, max])
               .range([0, 300]);

linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

上面的方法将dataset中最小的值，映射成0；将最大的值，映射成 300。

d3.scale.linear() 的返回值，是可以当做函数来使用的。因此，有这样的用法：linear(2.3)，返回175。

序数比例尺

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

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

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