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

！！比心