D3.jsで円グラフ

README

D3.jsで円グラフを複数並べてみた

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #dfd;
  font: 30px sans-serif;
}

jsdoit.html

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<div class="watch">
</div>

jsdoit.js

// 配列
var dataset = [15,20,30,40];

var width = 200;
var height = 200;
var rect = 100;

var svg = d3.select('.watch')
            .append('svg')
            .attr('width',width)
            .attr('height',height);

var arc = d3.svg.arc()
             .innerRadius(0)
             .outerRadius(rect)
             .startAngle(0.5*Math.PI)
             .endAngle(1.5*Math.PI);

var arc2 = d3.svg.arc()
             .innerRadius(0)
             .outerRadius(rect)
             .startAngle(0*Math.PI)
             .endAngle(0.2*Math.PI);

svg.append("path")
   .attr("d", arc)
   .attr("transform", "translate(" + rect +"," + rect +")");

svg.append("path")
   .attr("d", arc2)
   .attr("transform", "translate(" + rect +"," + rect +")");