Let's create donut using with arc.
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3js</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
var canvas = d3.select("body").append("svg")
.attr("width",500)
.attr("height",500);
var group = canvas.append("g")
.attr("transform", "translate(100,100)");
var r = 100;
var p = Math.PI*2;//the full distance around the circle, can be computed
var arc = d3.arc() //arc generator
.innerRadius(r-20)
.outerRadius(r)
.startAngle(0)
.endAngle(p-1);
//arc has 4 extra functions
//it equivalent to 6.28
group.append("path")
.attr("d", arc) //d attribute refers to path generator
</script>
</body>
</html>
- Result
'd3.js' 카테고리의 다른 글
| diagonal (0) | 2020.12.29 |
|---|---|
| scaleOrdinal, pie, centroid (0) | 2020.12.29 |
| path (0) | 2020.12.29 |
| load external data(json data) (0) | 2020.12.28 |
| interaction between html document and console (0) | 2020.12.28 |