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>

drag(selection)

此方法用於將拖拽行為應用於指定的選擇集。您可以使用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 中拖動矩形元素，則預設主體是正在拖動的矩形的 datum。

drag.clickDistance([distance])

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

drag.on(typenames, [listener])

此方法用於為拖拽的指定型別名稱設定事件偵聽器。typenames 是一個字串，包含一個或多個用空格分隔的型別名稱。每個型別名稱都是一個型別，後面可以選擇跟一個點(.)和一個名稱，例如 drag.one 和 drag.two。此型別應來自以下之一：

• start - 啟動一個新的指標。

• drag - 拖動一個活動的指標。

• end - 使一個活動的指標失效。

d3.dragDisable(window)

此方法用於停用拖放選擇。它阻止 mousedown 事件操作。大多數選定的瀏覽器預設支援此操作。如果不受支援，您可以將 CSS 屬性設定為 none。

d3.dragEnable(window[, noclick])

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

拖拽 API - 拖拽事件

D3.event 方法用於設定拖拽事件。它包含以下欄位：

• Target - 它表示拖拽行為。

• Type - 它是一個字串，可以是以下之一：“start”、“drag” 或 “end”。

• Subject - 拖拽主體，由 drag.subject 定義。

event.on(typenames, [listener])

事件物件公開 event.on 方法來執行拖拽。定義如下。

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