chapter-5 分组和坐标轴

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

定义坐标轴

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

//数据
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 中添加坐标轴

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

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

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

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

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

和

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

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);