Seralto · October 25, 2019 19:53
diff --git a/d3js-example.html b/d3js-example.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
 </head>

 <body>
  <script>
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);
    
    var radius = 10,
        coords = [
          { x: 100,  y: 325},
          { x: 610,  y: 301},
          { x: 444,  y: 100},
          { x: 179,  y: 195},
          { x: 477,  y: 225}
        ];
    
    svg.selectAll("circle")
      .append("circle")
    	.data(coords)
    	.enter().append("circle")
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("r", radius)
        .style("fill", "blue")
        .style("stroke", "black")
    		.call(d3.drag()
          .on("drag", dragged));
    	
    function dragged(d) {
      d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
    }
  </script>
 </body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	var svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 500);

	var radius = 10,
	coords = [
	{ x: 100, y: 325},
	{ x: 610, y: 301},
	{ x: 444, y: 100},
	{ x: 179, y: 195},
	{ x: 477, y: 225}
	];

	svg.selectAll("circle")
	.append("circle")
	.data(coords)
	.enter().append("circle")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", radius)
	.style("fill", "blue")
	.style("stroke", "black")
	.call(d3.drag()
	.on("drag", dragged));

	function dragged(d) {
	d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
	}
	</script>
	</body>