cemtopkaya/ornek-svg-daire-olustur.html

## ornek-svg-daire-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

        let svg = d3.select("svg")

        let circles = svg
            .append("circle")
            .attr("cx", 30)
            .attr("cy", 30)
            .attr("r", 20)
            .style("fill", "green")

        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

	let svg = d3.select("svg")

	let circles = svg
	.append("circle")
	.attr("cx", 30)
	.attr("cy", 30)
	.attr("r", 20)
	.style("fill", "green")

	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>