d3生成器--line，area，diagonal

1.线生成器—直线

line生成器生成的是直线，两点确定一条直线，所以line需要指定x，y的坐标，在文档中成为访问器，也叫访问函数，同时还可以指定插值模式，就是两点之间采用什么样的策略确定插值点，有step，basis，linear等。总之就是在定义生成器的时候会在后边定义它生成它所需要的一些属性。

// 线生成器
// var lineData=[[1,50],[40,10],[100,90],[130,30],[144,89]]
var lineData=[80,120,160,200,240,280]
// var lineData=[];
// for (var i=-10;i<20;i++){
//     lineData.push([i,i*i-2*i]);
// }
//d中传入的只是外边大数据的一级子元素，不一定非得是坐标形式
var line = d3.svg.line()
                         .x(function(d){return d;})
                         .y(function(d,i){return i%2==0 ? 40:120;})
                         // .defined(function(d){    //跳过缺失值
                         //    return d<300;
                         // })
                         .interpolate("step")
                         // .tension(0.1);

//svg容器
var svgContainer = d3.select("body").append("svg")
                                    .attr("width",600)
                                    .attr("height",200);

//把path扔到容器中-- lineData和lineFunction，并给d赋属性
var lineGraph = svgContainer.append("g")
                            .append("path")
                            .attr("d",line(lineData))
                            .attr("stroke","blue")
                            .attr("stroke-width",2)
                            .attr("fill","none")
                            .attr("transform","translate(0,20)");

这里interpolate参数为step，所以为台阶型

时刻注意：x，y访问函数中，传入的d是line生成器包裹数据的一级子元素，i是一级元素的索引，更真切的体会到了d3绑定数据的精华，绑定的数据，至于返回什么数据，就看自己如何对d进行操纵了，灵活。

2.线生成器—–弧线

生成一条线段其实有两种方式，一种就是两点确定一条直线，即上边那种，另外想极坐标一样，指定r，弧度，确定这条线，这就是line生成器下的一个分支弧线生成器

var per = 2*Math.PI/6;
    var data = [
        {r:100,angle:0},
        {r:100,angle:per*1},
        {r:100,angle:per*2},
        {r:100,angle:per*3},
        {r:100,angle:per*4},
        {r:100,angle:per*5},
        {r:100,angle:per*6}//所有弧度的起点都是0
    ];
//因为是如极坐标生成方式，所以需要指定r，angle
var lineradial = d3.svg.line.radial()
                         .radius(function(d){return d.r;})
                         .angle(function(d){return d.angle;})
                         // .defined(function(d){    //跳过缺失值
                         //    return !isNaN(d.angle);
                         // })
                         .interpolate("linear")
                         .tension(0.1);  //拉伸系数0-1

//svg容器
var svgContainer = d3.select("body").append("svg")
                                    .attr("width",200)
                                    .attr("height",200);

//把path扔到容器中-- lineData和lineFunction，并给d赋属性
var lineGraph = svgContainer.append("g")
                            .append("path")
                            .attr("d",lineradial(data))
                            .attr("stroke","blue")
                            .attr("stroke-width",2)
                            .attr("fill","none")
                            .attr("transform","translate(100,100)");

interpolate方式为linear，两点间为直线。

3.area生成器

area生成器其实就是在坐标轴上，x为自变量，y0，y1是因变量，两个y围合成的area，所以生成器的属性就需要定义：x访问函数，y0访问函数，y1访问函数。
先解释下下面代码中用到的时间比例尺，d3中，d3.time.scale()为我们制定了将事件映射到轴上的函数，不用我们考虑怎么转换了。

用于时间的格式化，将不规则的时间形式转换为object，就可以直接进行大小比较，作为比例尺映射
var format=d3.time.format("%d-%b-%y");
console.log(typeof(format.parse("24-Apr-07"))); // returns a Date

/*area生成器*/
var width=200,height=200;
var data = [
  {date: new Date(2007, 3, 24), value: 93.24},
  {date: new Date(2007, 3, 25), value: 95.35},
  {date: new Date(2007, 3, 26), value: 60.84},
  {date: new Date(2007, 3, 27), value: 99.92},
  {date: new Date(2007, 3, 30), value: 78.80},
  {date: new Date(2007, 4,  1), value: 99.47},
];
console.log(typeof(new Date(2007, 4,  1)));
var x = d3.time.scale()
            .rangeRound([0, width]);

var y = d3.scale.linear()
        .rangeRound([height, 0]);
 x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);
  // area.y0(y(0));
var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y1(function(d) { return y(d.value); })
    .y0(function(d){ return y(d.value*1.5)})
    .interpolate("basis");

//svg容器
var svgContainer = d3.select("body").append("svg")
                                    .attr("width",width)
                                    .attr("height",height);

//给d赋属性
var lineGraph = svgContainer.append("g")
                            .append("path")
                            .attr("d",area(data))
                            .attr("stroke","blue")
                            .attr("stroke-width",2)
                            .attr("fill","steelblue")
                            .attr("transform","translate(0,100)");

4.diagonal生成器

套路还是那些，在diagnal生成器定义中，定义source，target，要与绑定的数据对应。可以一次生成多条diagonal曲线。

/*diagnal生成器*/
 var width=400,height=400;
var data = [
                {A:{x:100,y:100},
                    B:{x:200,y:200}},
                {A:{x:200,y:200},
                    B:{x:300,y:100}},
            ];

var diagnal = d3.svg.diagonal()
                    .source(function(d,i){       //自定义访问器函数，但其实我们一般在数据中target source
                        return d.A;
                    })
                    .target(function(d,i){
                        return d.B;
                    });

//svg容器
var svg = d3.select("body").append("svg")
                                    .attr("width",width)
                                    .attr("height",height);

var color=d3.scale.category10();

svg.selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .append("path")
    .attr("d",diagnal)
    .attr("stroke","steelblue")
    .attr("stroke-width",3)
    .attr("fill","none")

！！比心