ShuanWu/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    D3 3.5’s d3.layout.pie supports optional padding between arcs. The sides of adjacent arcs are parallel, and the relative area (and angle) of arcs are approximately preserved.
forked from mbostock's block: Pie Padding

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var data = [1, 1, 2, 3, 5, 8, 13, 21];

var width = 960,
    height = 500,
    radius = height / 2 - 10;

var arc = d3.svg.arc()
    .innerRadius(radius - 40)
    .outerRadius(radius);

var pie = d3.layout.pie();

var color = d3.scale.category10();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.selectAll("path")
    .data(pie(data))
  .enter().append("path")
    .style("fill", function(d, i) { return color(i); })
    .attr("d", arc);

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var data = [1, 1, 2, 3, 5, 8, 13, 21];

	var width = 960,
	height = 500,
	radius = height / 2 - 10;

	var arc = d3.svg.arc()
	.innerRadius(radius - 40)
	.outerRadius(radius);

	var pie = d3.layout.pie();

	var color = d3.scale.category10();

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	svg.selectAll("path")
	.data(pie(data))
	.enter().append("path")
	.style("fill", function(d, i) { return color(i); })
	.attr("d", arc);

	</script>