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);