程式碼

          
            // html 
            <div class="dragContainer"></div>
          
        

          
            // js
            const data = [
              { name: "A", x: 200, y: 340 },
              { name: "B", x: 220, y: 300 },
              { name: "C", x: 250, y: 198 },
              { name: "D", x: 360, y: 296 },
              { name: "E", x: 160, y: 150 },
              { name: "F", x: 370, y: 360 },
              { name: "G", x: 187, y: 250 },
            ];
      
            const currentWidth = parseInt(
               d3.select(".dragContainer").style("width")
            );
            const heigth = 400;
            
            const svg = d3
              .select(".dragContainer")
              .append("svg")
              .attr("width", currentWidth)
              .attr("height", heigth);
      
            // 建立圓點
            const dots = svg
              .append("g")
              .selectAll("circle")
              .data(data)
              .join("circle")
              .attr("r", 25)
              .attr("cx", (d) => d.x)
              .attr("cy", (d) => d.y)
              .style("fill", "#19d3a2")
              .style("fill-opacity", 0.3)
              .attr("stroke", "#b3a2c8")
              .style("stroke-width", 4)
              .style("cursor", "pointer");
      
            // 建立拖曳方法
            const drag = d3
              .drag()
              .on("start", dragStart)
              .on("drag", dragging)
              .on("end", dragEnd);
      
            function dragStart() {
              d3.select(this).style("stroke", "blue");
            }
      
            function dragging() {
              const pt = d3.pointer(event, this);
              d3.select(this).attr("cx", pt[0]).attr("cy", pt[1]);
            }
            function dragEnd() {
              d3.select(this).style("stroke", "#b3a2c8");
            }
      
            // 呼叫拖曳方法
            dots.call(drag);