D3入门总结

基础API

选择元素

d3.select()

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

d3.selectAll()

选择指定元素的全部

绑定元素

data()

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

dataum()

绑定一个数据到选择集上

function(d, i){ }

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

插入元素

append()

在选择集末尾插入元素

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.scale.linear()

返回一个线性比例尺

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.scale.linear()               .domain([min, max])               .range([0, 300]);linear(0.9);    //返回 0linear(2.3);    //返回 175linear(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.scale.ordinal()                .domain(index)                .range(color);ordinal(0); //返回 redordinal(2); //返回 greenordinal(4); //返回 black

定义坐标轴

d3.svg.axis()

D3 中坐标轴的组件，能够在 SVG 中生成组成坐标轴的元素。

要生成坐标轴，需要用到比例尺，它们二者经常是一起使用的。

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);          //指定刻度的数量

• scale()：指定比例尺。
• orient()：指定刻度的朝向，bottom 表示在坐标轴的下方显示。
• ticks()：指定刻度的数量。

定义了坐标轴之后，只需要在 SVG 中添加一个分组元素 ，再将坐标轴的其他元素添加到这个 里即可

svg.append("g").call(axis);

在 D3 中，call() 的参数是一个函数,调用之后，将当前的选择集作为参数传递给此函数

完整的柱形图

添加 SVG 画布

var width = 400;var height = 400;var padding = {left:30, right:30, top:20, bottom:20};//在 body 里添加一个 SVG 画布   var svg = d3.select("body")    .append("svg")    .attr("width", width)    .attr("height", height);

定义数据和比例尺

var dataset = [10, 20, 30, 40, 33, 24, 12, 5];//x轴的比例尺var xScale = d3.scale.ordinal()    .domain(d3.range(dataset.length))    .rangeRoundBands([0, width - padding.left - padding.right]);//y轴的比例尺var yScale = d3.scale.linear()    .domain([0,d3.max(dataset)])    .range([height - padding.top - padding.bottom, 0]);

定义坐标轴

//定义x轴var xAxis = d3.svg.axis()    .scale(xScale)    .orient("bottom");//定义y轴var yAxis = d3.svg.axis()    .scale(yScale)    .orient("left");

添加矩形和文字元素

//矩形之间的空白var rectPadding = 4;//添加矩形元素var rects = svg.selectAll(".MyRect")        .data(dataset)        .enter()        .append("rect")        .attr("class","MyRect")        .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);        });//添加文字元素var texts = svg.selectAll(".MyText")        .data(dataset)        .enter()        .append("text")        .attr("class","MyText")        .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("dx",function(){            return (xScale.rangeBand() - rectPadding)/2;        })        .attr("dy",function(d){            return 20;        })        .text(function(d){            return d;        });

添加坐标轴的元素

//添加x轴svg.append("g")  .attr("class","axis")  .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")  .call(xAxis); //添加y轴svg.append("g")  .attr("class","axis")  .attr("transform","translate(" + padding.left + "," + padding.top + ")")  .call(yAxis);

过渡效果

transition()

启动过渡效果。

其前后是图形变化前后的状态（形状、位置、颜色等等）

duration()

指定过渡的持续时间，单位为毫秒。

ease()

指定过渡的方式，常用的有：

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

delay()

指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。

Update、Enter、Exit

如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到3个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。

如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit。

• update 部分的处理办法一般是：更新属性值
• enter 部分的处理办法一般是：添加元素后，赋予属性值
• exit 部分的处理办法一般是：删除元素（remove）