D3를 이용한 도넛 차트와 레전드

d3-doughnutchart.js

var data = [{
    title: "KOSPI",
    jisu: "1,965",
    change: 3.22,
    percent: "0.22%",
    collections: [{
        l: "상한",
        v: 5
    }, {
        l: "상승",
        v: 3
    }, {
        l: "보합",
        v: 2
    }, {
        l: "하락",
        v: 3
    }, {
        l: "하한",
        v: 10
    }]
}, {
    title: "KOSDAQ",
    jisu: "533",
    change: 3.22,
    percent: "-0.22%",
    collections: [{
        l: "상한",
        v: 0
    }, {
        l: "상승",
        v: 2
    }, {
        l: "보합",
        v: 2
    }, {
        l: "하락",
        v: 11
    }, {
        l: "하한",
        v: 5
    }]
}];

function render(collection) {
  var w = 280
  , h = 150
  , r = 65
  , ir = 46
  , selector = "body"
  , pie = d3.layout.pie().value(function(d) { return d.v; })
  , color = d3.scale.ordinal().range(["#f11", "#f99", "#ddd", "#9cf", "#28f"]);
  
  collection.forEach(function (d) { piechart(d); });
  drawLegend(collection[0].collections);
  
  function drawLegend(arr){
    var legendGroup = d3.select(selector).append("svg")
    .attr({
      "class": "legend",
      "width": 30,
      "height": r*2
    })
    .selectAll("g")
    .data(arr)
    .enter().append("g")
    .attr("transform", function(d, i) { 
      var marginTop = ((r * 2) - (arr.length * 14)) / 2;
      return "translate(0," + ((i * 14) + marginTop) + ")"; 
    });

    legendGroup.append("rect") 
    .attr({
       "width": 4,
      "height": 12
    })
    .style("fill", function(d, i) { return color(i); });

    legendGroup.append("text")
    .text(function(d) { return d.l; })
    .attr({
      "x": 6,"y": 9
    });
  }
  function piechart(data) {
    var canvas = d3.select(selector).append("svg:svg")
      .data([data.collections])
    .attr({
      "width": r * 2,
      "height": r * 2
    })
    .append("svg:g")
    .attr("transform", "translate(" + r + "," + r + ")");
    
    canvas.selectAll("path")
    .data(pie)
    .enter().append("svg:path")
    .attr("d", d3.svg.arc().innerRadius(ir).outerRadius(r))
    .style("fill", function(d, i) { return color(i); });

    canvas.append("svg:text") 
      .attr({ 
        "dy":-15, "class":"title", "text-anchor": "middle"
      })
      .style({
        "font-size":"12px", "fill":"#999"
      })
      .text(data.title);
    canvas.append("svg:text")
      .attr({
        "dy": 0, "class":"jisu","text-anchor":"middle"
      })
      .style({"font-size":"14px", "font-weight":"bold"})
      .text(data.jisu);
      
    canvas.append("svg:text").attr({
        "dy": 15,
        "class": "percent",
        "text-anchor": "middle"
      }) 
      .style("font-size","10px")
      .text(data.change + " " + data.percent);
  }
}

render(data);