sadet48 - d3js enter method

d3.js Dersleri

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>d3.js Dersleri</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<style type="text/css" media="screen">
*{margin: 0;padding: 0}
body {background: #ffffff;font-family: TTKB Dik Temel Abece;}
main {background: #FFFFFF;}
svg {border: 1px solid #ddd}
</style>
</head>
<body>
	<main> </main>
<script>

var data = [1,1,1];

// Öncelikle çizim alanımızı oluşturuyoruz
var svg = d3.select("main")
	.append("svg")
	.attr("width",100)
	.attr("height",60);

// Oluşturduğumuz alan üzerine data verilerimizi kullanarak daire çizelim
var circles = svg.selectAll("circle")
	.data(data) // Veriyi gösteriyoruz
	.enter() // Çizime başlıyoruz
	.append("circle") // çizmek için circle seçiyoruz
	.attr("transform","translate(20,0)") // x ekseninde 10 birim öteliyoruz
	.attr("cx",function(d,i){
            return i*30
        }) //x ekseni değerini belirliyoruz
	.attr("cy",30) // y ekseni değerini belirliyoruz
	.attr("fill","green") // Rengini ayarlıyoruz
	.attr("r",function(d){
	     return d*5
	}); // yarıçapı belirliyoruz
</script>
</body>
</html>