cemtopkaya/ornek-svg-daireyi-append-ile-olustur.html

## ornek-svg-daireyi-append-ile-olustur.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
    <svg width="960" height="500" style="border:1px solid red;"></svg>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script>
            let log = console.log

            var svg = d3.select("svg");

            var circles = svg.selectAll("circle")
                .data([{
                    "x": 30,
                    "y": 30,
                    "radius": 20,
                    "color": "green"
                }])
                .enter()
                .append("circle")
                .attr("cx", d => d.x)
                .attr("cy", d => d.y)
                .attr("r", d => d.radius)
                .style("fill", d => d.color)

        circles
            .on("mousedown", function () {
                log("mousedown event:", event)
                log("mousedown this:", this)
                log("mousedown d3(this):", d3.select(this))
            })
            .call(d3.drag()
                .on("start", () => log("start event: ", event))
                .on("drag", function () {

                    d3.select(this)
                        .attr("cx", d3.event.x)
                        .attr("cy", d3.event.y)
                })
                // end listener'ına eklenmiş fn varsa siler
                .on("end", null)
            )
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	</head>

	<body>
	<svg width="960" height="500" style="border:1px solid red;"></svg>
	<script src="https://d3js.org/d3.v5.js"></script>
	<script>
	let log = console.log

	var svg = d3.select("svg");

	var circles = svg.selectAll("circle")
	.data([{
	"x": 30,
	"y": 30,
	"radius": 20,
	"color": "green"
	}])
	.enter()
	.append("circle")
	.attr("cx", d => d.x)
	.attr("cy", d => d.y)
	.attr("r", d => d.radius)
	.style("fill", d => d.color)

	circles
	.on("mousedown", function () {
	log("mousedown event:", event)
	log("mousedown this:", this)
	log("mousedown d3(this):", d3.select(this))
	})
	.call(d3.drag()
	.on("start", () => log("start event: ", event))
	.on("drag", function () {

	d3.select(this)
	.attr("cx", d3.event.x)
	.attr("cy", d3.event.y)
	})
	// end listener'ına eklenmiş fn varsa siler
	.on("end", null)
	)
	</script>
	</body>

	</html>