sadet48 - d3js pie chart


	sadet48


	d3js pie chart

d3js Dersleri

Pie Chart

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>d3js Dersleri</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
main h1{font-family: Tahoma;color: #DA4444;font-size: 20px;text-align: center;padding: 5px 10px;}
main p{font-family: Tahoma;color: #080548;font-size: 20px;padding: 5px 10px;}
#container{border:0px solid red;margin:5px;}
svg{
border: 1px solid #ccc;
margin:0px;
padding-left: 70px;
padding-top: 18px;
box-sizing:border-box;
}
</style>
</head>
<body>
<main>
	<h1>d3js Dersleri</h1>
	<p>Pie Chart</p>
	<div id="container"></div>
</main>	
<script type="text/javascript">
document.querySelector("h1").innerHTML="d3.js Dersleri";
document.querySelector("p").innerHTML="pie chart";
var data = [20,45,60],
	w = 360,
    h = 250,
    r = 100;
var color =d3.scaleOrdinal()
		.range(["orange", "lightblue", "pink"]);  
var canvas =d3.select("#container")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
var group = canvas.append("g")
        .attr("transform", "translate(100, 100)");
var arc = d3.arc()
		.innerRadius(0)
		.outerRadius(r);
var pie =d3.pie()
        .value(function (d) {
        	return d;
        });
var arcs =group.selectAll(".arc")
		.data(pie(data))
		.enter()
		.append("g")
		.attr("class", "arc");
    arcs.append("path")
    .attr("d", arc)
    .attr("fill", function(d){
    	return color(d.data);
    });
	arcs.append("text")
    .attr("transform", function (d) {
    	return "translate("+arc.centroid(d)+")";
    })
    .attr("text-anchor", "middle")
    .attr("font-size", "0.4cm")
    .text(function (d) {
    	return d.data+"%";
    });
</script>
</body>
</html>

Toplam 109768 ziyaretçi

sadet48

JQuery Cycle ile Haber Bandı

Sadet Sevinç

sadet48.tr.gg@gmail.com

Facebook beğen

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

Ücretsiz kaydol