拖放是d3.js中最熟悉的概念之一。本章详细说明拖动及其方法。

安装

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

拖动API方法

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

• d3.drag（）
• 拖动（选择）
• drag.container（[container]）
• drag.filter（[过滤器]）
• drag.subject（[subject]）
• drag.clickDistance（[distance]）
• drag.on（typenames，[listener]）
• d3.dragDisable（窗口）
• d3.dragEnable（window [，noclick]）

现在让我们详细了解每个。

d3.drag（）

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

拖动（选择）

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

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

在这里，应用于选定元素的拖动行为是通过selection.call进行的。

drag.container([container])

用于将容器设置为指定的拖动函数。如果未指定容器，它将返回当前访问器。要使用“画布”拖动任何图形元素，可以将容器重新定义为其本身。定义如下。

function container() {
   return this;
}

drag.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]）

此方法用于设置要拖动的指定类型名称的事件侦听器。类型名是一个字符串，其中包含一个或多个由空格分隔的类型名。每个类型名都是一个类型，可以选择后面跟一个句点（。）和一个名称，例如drag.one和drag.two。此类型应来自以下之一：

• start-启动一个新的指针。

• 拖动-拖动活动指针。

• 结束-不活动的活动指针。

d3.dragDisable（窗口）

此方法用于禁用拖放选择。它可以防止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);