Day13－D3 的 Drag 拖曳

本篇大纲：selection.call( )、drag.on( )、范例

今天要来看另一个d3有趣的互动事件：Drag 拖曳！

我们先来看看官方文件关於 d3.drags 有多少 API 可以使用，接着再来讲解要怎麽使用这些 API

d3.drag( )

直接先看到 d3.drag() 这个API，它是用来建立drag事件的方法。当我们使用d3.drag()时，它会返还一个drag方法，接着我们要用selection.call( )这个API把返还的drag方法绑定到 selection 上

`selection.call( )`

这个 API 是在选定的DOM元素上呼叫并执行特定方法，但这个方法只会被执行一次。由於 d3.drag() 会返还一个方法，因此我们要用selection.call( )来执行这个方法

drag.on(事件, 方法)

使用 d3.drag( ) 建立拖曳事件後，还能使用 drag.on('事件', 方法) 把拖曳事件细分成三个阶段，分别是

.on('start') ⇒ 拖曳开始
.on('dragged') ⇒ 拖曳期间
.on('end) ⇒ 拖曳结束

Drag 范例

看完这几个方法并了解怎麽使用後，我们现在来实际看范例跟程序码吧！首先，一样先把拿到的资料绑定到DOM元素上：

// html 
<div class="chartContainer"></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 svg = d3.select('.chartContainer')
                  .append('svg')
                  .attr('width', 500)
                  .attr('height', 500);
    
// 建立圆点
const dots = svg.append('g')
                .selectAll('circle')
                .data(data)
                .enter()
                .append('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')

完成後我们的画面上就会有几个圆点点

接着，我们来建立拖曳事件：

我们先使用d3.drag( ) 建立拖曳事件
接着使用drag.on( ) 设定拖曳不同阶段DOM元素的变化
- start ⇒ 拖曳事件一开始时，让选定的圆点边框变成蓝色
- drag ⇒ 拖曳期间，使用 d3.pointer 去计算目前滑鼠的XY座标，并把这个座标的位置设定给此圆点
- end ⇒ 拖曳结束後，选定的圆点边框变回原本的颜色

// 建立拖曳方法
const drag = d3.drag()
               .on('start', function(){
                  d3.select(this)
                    .style('stroke', 'blue')
                 })
               .on('drag', function(){
                  let pt = d3.pointer(event, this)
                  d3.select(this)
                    .attr('cx', pt[0])
                    .attr('cy', pt[1])
                 })
                .on('end', function(){
                  d3.select(this)
                    .style('stroke', '#b3a2c8')
                 });

最後，只要选定想操作的DOM元素，并使用 d3.call( )呼叫drag事件就可以啦！