Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active January 20, 2018 17:01
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mbostock/45943c4af772e38b4f4e to your computer and use it in GitHub Desktop.
Save mbostock/45943c4af772e38b4f4e to your computer and use it in GitHub Desktop.
Download ZIP
Rainbow Circle
Raw
.block
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="960"></svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var π = Math.PI,
τ = 2 * π,
n = 500;
var width = 960,
height = 960,
outerRadius = width / 2 - 20,
innerRadius = outerRadius - 80;
d3.select("svg").append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.selectAll("path")
.data(d3.range(0, τ, τ / n))
.enter().append("path")
.attr("d", d3.svg.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius)
.startAngle(function(d) { return d; })
.endAngle(function(d) { return d + τ / n * 1.1; }))
.style("fill", function(d) { return d3.hsl(d * 360 / τ, 1, .5); });
d3.select(self.frameElement).style("height", height + "px");
</script>
@liugui
Copy link

liugui commented Jul 20, 2016

Hello! I run you code on my computer, it's OK. But when I remove the '* 1.1' in your code on line 25, that is

.endAngle(function(d) { return d + τ / n; }))

the result is strange and there is s white line between every arc. I thought this is the stroke so I changed the stroke-width to 0, but it's still there. Why should we must add 1.1 to the code? Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment