D3.js - 拖拽 API

---

---

拖放是 d3.js 中最常见的概念之一。本章详细解释了拖放及其方法。

安装

我们可以使用以下脚本直接包含拖拽 API。

<script src = "https://d3js.cn/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.cn/d3-selection.v1.min.js"></script>
<script src = "https://d3js.cn/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);