Last active
January 20, 2018 17:01
-
-
Save mbostock/45943c4af772e38b4f4e to your computer and use it in GitHub Desktop.
Rainbow Circle
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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