---
description: 分组直接使用append('g'), 然后再添加节点
---

# chapter-5 分组和坐标轴

### 定义坐标轴 <a href="#id-397cce5914501a16bb15951607bd286a" id="id-397cce5914501a16bb15951607bd286a"></a>

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

```javascript
//数据
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 中添加坐标轴 <a href="#bb0d69344863c8a844c25c83033e94f5" id="bb0d69344863c8a844c25c83033e94f5"></a>

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

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

上面有一个 **call()** 函数，其参数是前面定义的坐标轴 axis。

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

```javascript
function foo(selection) {
  selection
      .attr("name1", "value1")
      .attr("name2", "value2");
}
foo(d3.selectAll("div"))
```

和

```
d3.selectAll("div").call(foo);
```

![](https://2325800184-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAbbjuBBZkc46mRixxv%2F-LAex9QplHBmBNFPa-WT%2F-LAexEmTGN4PfHxnDnmS%2Fimage.png?alt=media\&token=12122eba-4194-4263-909e-0c5cb23feeb3)

```javascript
var data = [10,40,50,60];
var width = height = 500;
var widthScale = d3.scale.linear()
    .domain([0,60])
    .range([0,width]);

var colorScale = d3.scale.linear()
    .domain([0,60])
    .range(['red','blue']);

var axis = d3.svg.axis()
    .scale(widthScale);//根据横向比例尺生成的坐标轴

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

var rect = canvas.append('g').selectAll('rect') //分组后选择所有的矩形
    .data(data)
    .enter()
    .append('rect')
    .attr('width',function(d){return widthScale(d)})
    .attr('height',50)
    .attr('fill',function(d){return colorScale(d)})
    .attr('y',function(d,i){
        return i*60;
    })
canvas.append('g')
    .attr('transform','translate(0,400)')
    .call(axis);    
```
