Fork me on GitHub

D3学习记录2

发表于 | 分类于 ， |
字数统计: 2k | 阅读时长 ≈ 7 min

继续，比例尺和坐标轴。

绘制矩形

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

在 SVG 中，矩形的元素标签是 rect。例如：

1
2
3
4
<svg>
  <rect></rect>
  <rect></rect>
</svg>

上面的 rect 里没有矩形的属性。矩形的属性，常用的有四个：

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

要注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。
现在给出一组数据，要对此进行可视化。数据如下：

1
var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度

为简单起见，我们直接用数值的大小来表示矩形的像素宽度（后面会说到这不是一种好方法）。然后，添加以下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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");

这段代码添加了与 dataset 数组的长度相同数量的矩形，所使用的语句是：

1
2
3
4
svg.selectAll("rect")   //选择svg内所有的矩形
    .data(dataset)  //绑定数组
    .enter()        //指定选择集的enter部分
    .append("rect") //添加足够数量的矩形元素

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

添加了元素之后，就需要分别给各元素的属性赋值。在这里用到了 function(d, i)，前面已经讲过，d 代表与当前元素绑定的数据，i 代表索引号。给属性赋值的时候，是需要用到被绑定的数据，以及索引号的。

1
.attr("fill","steelblue");//给矩形元素设置颜色

比例尺

将某一区域的值映射到另一区域，其大小关系不变。

D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者需要指定 domain 和 range 的范围，如此即可得到一个计算关系。

线性比例尺

线性比例尺，能将一个连续的区间，映射到另一区间。要解决柱形图宽度的问题，就需要线性比例尺。

假设有以下数组：

1
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];

要求将 dataset 中最小的值，映射成 0；将最大的值，映射成 300。
代码如下：

1
2
3
4
5
6
7
8
9
10
var min = d3.min(dataset);
var max = d3.max(dataset);
 
var linear = d3.scale.linear()
        .domain([min, max])
        .range([0, 300]);
 
linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

其中，d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域。在这里还用到了两个函数，它们经常与比例尺一起出现：

  • d3.max()
  • d3.min()

这两个函数能够求数组的最大值和最小值，是 D3 提供的。按照以上代码，比例尺的定义域 domain 为：[0.9, 3.3]，比例尺的值域 range 为：[0, 300]。因此，当输入 0.9 时，返回 0；当输入 3.3 时，返回 300。

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

序数比例尺

有时候，定义域和值域不一定是连续的。例如，有两个数组：

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

我们希望 0 对应颜色 red，1 对应 blue，依次类推。
但是，这些值都是离散的，线性比例尺不适合，需要用到序数比例尺。

1
2
3
4
5
6
7
var ordinal = d3.scale.ordinal()
        .domain(index)
        .range(color);
 
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

给柱形图添加比例尺

修改一下数组，再定义一个线性比例尺。

1
2
3
4
5
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]);

按照上一章的方法添加矩形，在给矩形设置宽度的时候，应用比例尺。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 linear(d);   //在这里用比例尺
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

如此一来，所有的数值，都按照同一个线性比例尺的关系来计算宽度，因此数值之间的大小关系不变。

坐标轴的构成

在 SVG 画布的预定义元素里，有六种基本图形：

  • 矩形
  • 圆形
  • 椭圆
  • 线段
  • 折线
  • 多边形

另外，还有一种比较特殊，也是功能最强的元素：

  • 路径

画布中的所有图形，都是由以上七种元素组成。
这里面没有坐标轴这种元素。因为d3不可能为每一种图形都配备一个单独的元素，那样 SVG 就会过于庞大。

我们需要用其他元素来组合成坐标轴，最终使其变为类似以下的形式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<g>
  <!-- 第一个刻度 -->
  <g>
    <line></line>   <!-- 第一个刻度的直线 -->
    <text></text>   <!-- 第一个刻度的文字 -->
  </g>
  <!-- 第二个刻度 -->
  <g>
    <line></line>   <!-- 第二个刻度的直线 -->
    <text></text>   <!-- 第二个刻度的文字 -->
  </g>
  ...
  <!-- 坐标轴的轴线 -->
  <path></path>
</g>

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

如果需要手动添加这些元素就太麻烦了，为此，D3 提供了一个组件：d3.svg.axis()。

定义坐标轴

要生成坐标轴，需要用到比例尺，它们二者经常是一起使用的。下面，在上一章的数据和比例尺的基础上，添加一个坐标轴的组件。

1
2
3
4
5
6
7
8
9
10
11
//数据
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定义比例尺,其中使用了数组 dataset
var linear = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, 250]);
//定义坐标轴，其中使用了线性比例尺 linear。
var axis = d3.svg.axis() //D3 中坐标轴的组件，能够在 SVG 中生成组成坐标轴的元素
     .scale(linear)      //指定比例尺
     .orient("bottom")   //指定刻度的方向,bottom 表示在坐标轴的下方显示。
     .ticks(7);          //指定刻度的数量

在 SVG 中添加坐标轴

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

1
2
svg.append("g").call(axis);
// call() 函数，其参数是前面定义的坐标轴 axis

在 D3 中，call() 的参数是一个函数。调用之后，将当前的选择集作为参数传递给此函数。也就是说，以下两段代码是相等的。

1
2
3
4
5
6
7
8
function foo(selection) {
  selection
      .attr("name1", "value1")
      .attr("name2", "value2");
}
foo(d3.selectAll("div"))
//和
d3.selectAll("div").call(foo);

设定坐标轴的样式和位置

默认的坐标轴样式不太美观，下面提供一个常见的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
 
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>

分别定义了类 axis 下的 path、line、text 元素的样式。接下来，只需要将坐标轴的类设定为 axis 即可。坐标轴的位置，可以通过 transform 属性来设定。

通常在添加元素的时候就一并设定，写成如下形式：

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

参考

http://www.ourd3js.com/wordpress/

-------------完结撒花 -------------