JSFiddle - React, Tailwind, and code Playground

by Shang-De You

JavaScript

var svg = d3.select("body").append("svg")
	.attr("width", 500)
  .attr("height", 500)
  
var drag = d3.behavior.drag()
	.origin(function(d,i){
  	return {x: d.cx, y: d.cy}
  })
  .on("dragstart", function(d){
  	console.log("拖曳開始")
  })
  .on("dragend", function(d){
  	console.log("拖曳結束")
  })
  .on("drag", function(d){
  	d3.select(this)
    	.attr("cx", d.cx = d3.event.x)
      .attr("cy", d.cy = d3.event.y)
  })  
  
  
var circles = [{cx: 150, cy: 200, r: 30},
	{cx: 250, cy: 200, r: 30}]
  
svg.selectAll("circle")
	.data(circles)
  .enter()
  .append("circle")
  .attr("cx", function(d){ return d.cx })
  .attr("cy", function(d){ return d.cy })
  .attr("r", function(d){ return d.r })
  .attr("fill", "steelblue")
  .call(drag)