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.拖拽()
拖动（选择）
拖动.container([容器])
拖动.过滤器（[过滤器]）
拖动.subject([主题])
拖动.clickDistance([距离])
Drag.on（类型名称，[侦听器]）
d3.dragDisable(窗口)
d3.dragEnable(窗口[, noclick])

现在让我们详细了解其中的每一个。

d3.拖拽()

该方法用于创建新的拖动。您可以使用以下脚本调用此方法。

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

拖动（选择）

此方法用于将拖动应用于指定的选择。您可以使用Selection.call调用此函数。下面定义了一个简单的示例。

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

在这里，应用于所选元素的拖动Behave是通过 Selection.call 进行的。

drag.container([container])

用于将容器设置为指定的功能进行拖动。如果未指定容器，则返回当前访问器。要使用画布拖动任何图形元素，您可以将容器重新定义为本身。它的定义如下。

function container() {
   return this;
}

拖动.过滤器（[过滤器]）

它用于设置指定功能的过滤器。如果未指定过滤器，它将返回当前过滤器，如下定义。

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

拖动.subject([主题])

用于将主体设置为指定的功能进行拖动，定义如下。

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

在这里，主体代表被拖动的东西。例如，如果要拖动 SVG 中的矩形元素，则默认主题是被拖动矩形的基准。

拖动.clickDistance([距离])

该方法用于设置单击 mousedown 和 mouseup 事件的最大距离。如果未指定距离，则它指向零。

Drag.on（类型名称，[侦听器]）

该方法用于设置指定类型名称的事件监听器以进行拖动。类型名称是一个字符串，包含一个或多个由空格分隔的类型名称。每个类型名称都是一个类型，可以选择后跟句点 (.) 和名称，例如 Drag.one 和 Drag.two。该类型应来自以下类型之一 -

start - 启动一个新指针。
拖动- 拖动活动指针。
end - 活动指针处于非活动状态。

d3.dragDisable(窗口)

此方法用于禁用拖放选择。它阻止 mousedown 事件操作。大多数选定的浏览器默认支持此操作。如果不支持，您可以将 CSS 属性设置为 none。

d3.dragEnable(窗口[, noclick])

此方法用于在指定窗口位置启用拖放选择。它用于调用mouseup事件动作。如果您指定 noclick 值为 true，则单击事件将在零毫秒超时后到期。

拖动 API - 拖动事件

D3.event方法用于设置拖动事件。它由以下字段组成 -

目标- 它代表拖动Behave。
类型- 它是一个字符串，可以是以下任意一项 - “start”、“drag”或“end”。
subject - 拖动主题，由drag.subject 定义。

event.on(类型名称, [监听器])

事件对象公开 event.on 方法来执行拖动。它的定义如下。

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