数据可视化js框架 d3.js入门

数据可视化js框架 d3.js入门

[一] 选择元素绑定数据

• 1.下载、引入d3.js
• 2.d3.select()：选择所有指定元素的第一个
• 3.d3.selectAll() ：选择指定元素的全部

eg:

var body = d3.select("body");   //选择文档中的body元素
var p1 = body.select("p");      //选择body中的第一个p元素
var p = body.selectAll("p");    //选择body中的所有p元素

如何绑定数据

• datum()：绑定一个数据到选择集上
• data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

datum():

<p>apple</p>
<p>pear</p>
<p>banana</p>

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

输出:

第 0 个元素绑定的数据是 China 
第 1 个元素绑定的数据是 China 
第 2 个元素绑定的数据是 China 

data():

var dataset = ['i likes dogs', 'i like cats', 'i likes snakes'];
p.data(dataset).text(function(d, i){  // 引入data绑定
  return d;
});

输出:

i likes dogs
i like cats
i likes snakes

[二] 选择、插入、删除元素

选择参数

• 通过类名、id名选择参数。
  d3.select('#box').style('background','pink');

插入元素

• append()：在选择集末尾插入元素
  d3.select('.orange').append("p").text(" 选择集后插入元素 ");
• insert()：在选择集前面插入元素
  d3.select('body').insert("p","#box").text(" 选择集前插入元素 ");

结果：

apple
pear
选择集前插入元素
banana
选择集后插入元素

删除元素

• remove()：删除选择集
  d3.select('#orange').remove();

[三] 制作简单图表

SVG:
可缩放矢量图形。是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。

添加画布

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

绘制矩形
横向柱形图。只绘矩形，不绘文字和坐标轴

<svg>
<rect></rect>
<rect></rect>
</svg>

rect矩形属性：

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

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

var dataset = [250, 210, 170, 130, 350];
    var rectHeight = 25;
    svg.selectAll("rect") //选择svg内所有的矩形
      .data(dataset)      //绑定数组
      .enter()            //指定选择集的enter部分
      .append('rect')     //添加足够数量的矩形元素
      .attr('x', 20)
      .attr('y', function(d, i){return i * rectHeight;})
      .attr('width', function(d, i){return d;})
      .attr('height', rectHeight - 2)
      .attr('fill', 'steelblue');   //给矩形元素设置颜色 css最好外置。rect的颜色属性是：fill:red

[四] 比例尺

对于一元二次函数，有x\y两个未知数，当x的值确定时，y值也确定。x的方位被称为定义域，y的方位成为值域
d3指定定义域domain和值域range，既能得到一个计算关系。

线性比例尺
能将一个连续的区间，映射到另一区间。

var data = [1.2, 2.3, 0.9, 1.5, 3.3];
// 要求：将最小的值映射成0，最大的值映射成300.
var min = d3.min(data);
var max = d3.max(data);
var linear = d3.scale.linear()    // 定义线性比例尺
      .domain([min, max])         // 定义域
      .range([0, 300]);           // 值域
linear(0.9);
linear(2.3);
linear(3.3);

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

序数比例尺

定义域和值域不连续时

//序数比例尺
// 要求： 0 对应颜色 red，1 对应 blue，依次类推。
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

给柱形图添加比例尺

结合制作简单图表和线性比例尺制作：

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 width = 300;
    var height = 300;
    var svg = d3.select("body").append('svg').attr("width", width).attr("height", height);
    var rectHeight = 25;
    svg.selectAll("rect")
      .data(dataset)
      .enter()            //指定选择集的enter部分
      .append('rect')     //添加足够数量的矩形元素
      .attr('x', 20)
      .attr('y', function(d, i){return i * rectHeight;})
      .attr('width', function(d, i){return linear(d);})
      .attr('height', rectHeight - 2)
      .attr('fill', 'steelblue');

[五]坐标轴

坐标轴，是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的，需要用其他的元素组合构成。D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。

坐标轴由什么构成
在 SVG 画布的预定义元素里，有六种基本图形：

• 矩形
• 圆形
• 椭圆
• 线段
• 折线
• 多边形
• 路径 // 功能最强的元素

分组元素 是 SVG 画布中的元素，意思是 group。此元素是将其他元素进行组合的容器，在这里是用于将坐标轴的其他元素分组存放。

定义坐标轴
在上一章的数据和比例尺的基础上：

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

var width = 300;
var height = 300;
var svg = d3.select("body").append('svg').attr("width", width).attr("height", height);

//给柱形图添加比例尺
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 rectHeight = 25;  // 每个矩形所占的像素高度（包括空白）

svg.selectAll("rect")
  .data(dataset)
  .enter()                  //指定选择集的enter部分
  .append('rect')           //添加足够数量的矩形元素
  .attr('x', 20)
  .attr('y', function(d, i){
    return i * rectHeight;
  })
  .attr('width', function(d, i){
    return linear(d);
  })
  .attr('height', rectHeight - 2)
  .attr('fill', 'steelblue');

//定义坐标轴
var axis = d3.svg.axis()    // D3 中坐标轴的组件，能够在 SVG 中生成组成坐标轴的元素。
  .scale(linear)            //指定比例尺
  .orient('bottom')         //指定刻度的方向
  .ticks(7);                //指定刻度的数量

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(20,130)")
  .call(axis);

[六]完整柱形图

css

.axis path,
.axis line{fill:none;stroke:black;shape-rendering:crispEdges;}
.axis text{font-family:sans-serif;font-size:11px;}
.MyRect{fill:steelblue;}
.MyText{fill:white;text-anchor:middle;}

js

/*添加svg画布*/
  // 画布大小
  var width = 400;
  var height = 400;
  //在body里添加一个svg画布
  var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

  //画布周边的空白
  var padding = {left: 30, right: 30, top: 20, bottom: 20};

  /*定义数据和比例尺*/
  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, i){
      return yScale(d);
    })
    .attr('width', xScale.rangeBand() - rectPadding)
    .attr('height', function(d){
      return height - padding.top - padding.bottom - yScale(d);
    })
    .attr('fill', 'steelblue');

  //添加文字元素
  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, i){
      return yScale(d);
    })
    .attr('dx', function(d, i){
      return (xScale.rangeBand() - rectPadding) / 2;
    })
    .attr('dy', function(d, i){
      return 20;
    })
    .text(function(d){
      return d;
    });

  // 矩形元素和文字元素的 x 和 y 坐标要特别注意，要结合比例尺给予适当的值。
  /*添加坐标轴*/
  //添加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()
过渡

.attr("fill","red")         //初始颜色为红色
.transition()               //启动过渡
.attr("fill","steelblue")   //终止颜色为铁蓝色

duration()
指定过渡的持续时间，单位为毫秒。
如 duration(2000) ，指持续 2000 毫秒，即 2 秒。
ease()
指定过渡的方式，常用的有：

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

调用时，格式形如： ease(“bounce”)。

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

.transition()
.duration(1000)
.delay(500)

如此，图形整体在延迟 500 毫秒后发生变化，变化的时长为 1000 毫秒。因此，过渡的总时长为1500毫秒。

对一个一个的图形（图形上绑定了数据）进行指定时：

.transition()
.duration(1000)
.delay(funtion(d,i){
    return 200*i;
})

如此，假设有 10 个元素，那么第 1 个元素延迟 0 毫秒（因为 i = 0），第 2 个元素延迟 200 毫秒，第 3 个延迟 400 毫秒，依次类推….整个过渡的长度为 200 * 9 + 1000 = 2800 毫秒。

实现简单的动态效果
下面将在 SVG 画布里添加三个圆，圆出现之后，立即启动过渡效果。
第一个圆，要求移动 x 坐标。

var circle1 = svg.append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 45)
        .style("fill","green");

//在1秒（1000毫秒）内将圆心坐标由100变为300
circle1.transition()
    .duration(1000)
    .attr("cx", 300);

第二个圆，要求既移动 x 坐标，又改变颜色。

var circle2 = svg.append("circle")
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 45)
    .style("fill","green"); //与第一个圆一样，省略部分代码

//在1.5秒（1500毫秒）内将圆心坐标由100变为300，
//将颜色从绿色变为红色
circle2.transition()
    .duration(1500)
    .attr("cx", 300)
    .style("fill","red");

第三个圆，要求既移动 x 坐标，又改变颜色，还改变半径。

var circle3 = svg.append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 45)
  .style("fill","green"); //与第一个圆一样，省略部分代码

//在2秒（2000毫秒）内将圆心坐标由100变为300
//将颜色从绿色变为红色
//将半径从45变成25
//过渡方式采用bounce（在终点处弹跳几次）
circle3.transition()
    .duration(2000)
    .ease("bounce")
    .attr("cx", 300)
    .style("fill","red")
    .attr("r", 25);

给柱形图加上动态效果
在上一章完整柱形图的基础上稍作修改，即可做成一个带动态效果的、有意思的柱形图。

.attr("y",function(d){
    var min = yScale.domain()[0];
    return yScale(min);
})
.transition()
.delay(function(d,i){
    return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y",function(d){
    return yScale(d);
});

参考：http://wiki.jikexueyuan.com/project/d3wiki/selection.html
d3 API中文手册：https://github.com/d3/d3/wiki/API–%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C