完整範例：http://wcc723.github.io/d3js/2014/10/25/Ironman-30-days-26/

介紹這麼多，但是還沒有介紹到d3.layout，這用途是可以快速建立圖表，這篇來介紹pie layout，用的是環保局的資料。

資料來源

這次用的是環保局的Open data，環保局的資料也是不錯使用，包含許多個是，CSV、json、XML等等，在政府資料中，優點是還算標準且穩定。

而且只要會Jquery，就可以很輕鬆的把資料抓回來，範例如下：

var path = {
    url: 'http://opendata.epa.gov.tw/ws/Data/WRRecovery/?$skip=0&$top=1000&format=json', 
    dataType: 'jsonp',
  }
$.ajax(path)
  .done(function (d) {   //如果成功
    console.log(data)
  })
  .fail(function(jqxhr, textStatus, error){
    console.log('GG,沒戲唱了'); //失敗
});

圓餅圖

d3.js有出許多的layout，只要把資料給他就可以運作，程式碼參考如下，只要先建立一個layout pie物件，在設定輸入的值，套用後就可以轉成圓餅圖。

var pie = d3.layout.pie() //建立D3.layout pie物件
    .sort(null) //是否排序
    .value(function(d) {return d.Amount; }); //傳入的值

範例

範例中的資料(json)是用jquery去抓，在用d3去轉換成圖形。

$(function() {  

//定義json 路徑
var path = {
    url: 'http://opendata.epa.gov.tw/ws/Data/WRRecovery/?$skip=0&$top=1000&format=json', 
    dataType: 'jsonp',
  }
var data = "";
var w = 450, h = 450;
var svg = d3.select('.demo').append('svg') //插入SVG
  .attr('width', w)
  .attr('height', h); 

$.ajax(path)
  .done(function (d) {   //如果成功
    data = d;
    console.log(data)
    runChart('102')
  })
  .fail(function(jqxhr, textStatus, error){
    console.log('GG,沒戲唱了'); //失敗
});

runChart = function(filter){
  
  var color = d3.scale.category10(); //D3 內存產生顏色的function
  var pie = d3.layout.pie() //建立D3.layout pie物件
    .sort(null)
    .value(function(d) {return d.Amount; });

  var outerRadius = h / 2 , innerRadius = h / 4; //弧形的位置
  var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius) //定義內外圈位置

  var arcs = svg.selectAll('g.arc')
    .data(pie(dataFilter(data, filter))) //將資料放入pie
    .enter()
    .append('g') //塞好'g'
    .attr('class', 'arc') //準備好Class
    .attr('transform', 'translate(' + outerRadius + ',' + outerRadius + ')') //移動圓心的位置

  arcs.append('path')
    .attr('fill', function(d,i){
      return color(i); //招喚前面的color function
    })
    .attr('d', arc) // 前面的 arc function
    //需要 pie()所產生出來得值

  arcs.append('text')
    .attr('transform', function(d){
      return 'translate('+ arc.centroid(d) +')';
      //centroid()任何形狀的中心點
    })
    .attr('text-anchor', 'middle')
    .text(function(d){
      return  d.data.Item + d.data.Amount; //在每個形狀的中央插入文字
    })
    .attr('fill', 'white');

  svg.selectAll('.arc').on('mouseover', function(d){ //滑鼠事件
    mousePos = d3.mouse(this); //取得滑鼠座標
    var xPos = mousePos[0] + outerRadius; //修正滑鼠座標
    var yPos = mousePos[1] + outerRadius; //修正滑鼠座標

    d3.select('#tooltip') //將Tooltip補上資料
      .style({
        'left': xPos + 'px', //加上位置
        'top': yPos + 'px'
      })
      .classed('hidden', false) 
    d3.select('#tooltip .name').html(d.data.Item) //插入名稱
    d3.select('#tooltip .value').html(d.data.Amount + '%')
  }).on('mouseout', function(d){
    d3.select('#tooltip').classed('hidden', true) //切換顯示及隱藏
  });

};

dataFilter = function(data, filter){ //過濾部分資料
  var newData = [];
  $.each(data, function(i,d){
    if (d.Year == filter){
      newData.push(d);
    }
  });
  return newData
};



});

結語

接下會幾篇會介紹幾種不同的layout，透過不同的範例，感謝收看(MOPCON打這篇，有時候都不知道自己在打什麼...)。