D3.js - 拖動 API

拖放是 d3.js 中最熟悉的概念之一。本章詳細介紹了拖動及其方法。

安裝

我們可以使用以下指令碼直接包含拖動 API。

<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>

拖動 API 方法

以下是 D3.js 中一些最重要的拖動 API 方法。

• d3.drag()
• drag(selection)
• drag.container([container])
• drag.filter([filter])
• drag.subject([subject])
• drag.clickDistance([distance])
• drag.on（typenames，[listener]）
• d3.dragDisable(window)
• d3.dragEnable（window [，noclick]）

現在讓我們詳細瞭解每一個。

d3.drag()

此方法用於建立新拖動。你可以使用以下指令碼呼叫此方法。

<script>
   var drag = d3.drag();
</script>

拖動（選擇）

此方法用於將拖動應用於指定的選擇。你可以使用 selection.call 呼叫此函式。 下面定義一個簡單的例子。

d3.select(".node").call(d3.drag().on("drag", mousemove));

這裡，應用於所選元素的拖動行為是通過 selection.call。

drag.container([container])

它用於將容器設定為指定的拖動功能。如果未指定容器，則返回當前訪問者。要使用 Canvas 拖動任何圖形元素，可以將容器重新定義為自身。它定義如下。

function container() {
   return this;
}

drag.filter([filter])

它用於為指定的函式設定過濾器。如果未指定過濾器，則返回如下定義的當前過濾器。

function filter() {
   return !d3.event.button;
}

drag.subject([subject])

它用於將主題設定為指定的拖動功能，並在下面定義。

function subject(d) {
   return d = =  null ? {x: d3.event.x, y: d3.event.y} : d;
}

這裡，主題代表被拖動的東西。例如，如果要在 SVG 中拖動矩形元素，則預設主題是要拖動的矩形的基準。

drag.clickDistance([distance])

此方法用於設定單擊 mousedown 和 mouseup 事件的最大距離。如果未指定距離，則指向零。

drag.on（typenames，[listener]）

此方法用於為指定的型別名稱設定事件偵聽器以進行拖動。型別名是一個包含一個或多個由空格分隔的型別名的字串。每個 typename 都是一個型別，可選地後跟句點（。）和名稱，例如 drag.one 和 drag.two。此型別應來自以下之一 -

• start - 啟動一個新指標。

• 拖動 - 拖動活動指標。

• end - 非活動指標。

d3.dragDisable(window)

此方法用於禁用拖放選擇。它可以防止 mousedown 事件操作。預設情況下，大多數選定的瀏覽器都支援此操作。如果不支援，則可以將 CSS 屬性設定為 none。

d3.dragEnable（window [，noclick]）

此方法用於在指定的視窗位置上啟用拖放選擇。它用於呼叫 mouseup 事件操作。如果指定 noclick 值為 true，則 click 事件將超過零毫秒超時。

拖動 API - 拖動事件

D3.event 方法用於設定拖動事件。它包括以下欄位 -

• 目標 - 它表示拖動行為。

• 型別 - 它是一個字串，可以是以下任何一個 - “開始”，“拖動”或“結束”。

• 主題 - 拖動主題，由 drag.subject 定義。

event.on（typenames，[listener]）

事件物件公開 event.on 方法以執行拖動。它的定義如下。

d3.event.on("drag", dragged).on("end", ended);