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 中拖动矩形元素，则默认主题是被拖动矩形的数据。
drag.clickDistance([distance])
此方法用于设置单击 mousedown 和 mouseup 事件的最大距离。如果未指定 distance，则指向零。
drag.on(typenames, [listener])
此方法用于设置指定 typenames 的拖动事件侦听器。typenames 是一个字符串，包含一个或多个由空格分隔的 typename。每个 typename 都是一个类型，后面可以跟一个句点 (.) 和一个名称，例如 drag.one 和 drag.two。此类型应来自以下 − 之一
start −启动一个新指针。
drag − 拖动活动指针。
end − 停用活动指针。
d3.dragDisable(window)
此方法用于禁用拖放选择。它阻止 mousedown 事件操作。大多数选定的浏览器默认支持此操作。如果不支持，您可以将 CSS 属性设置为 none。
d3.dragEnable(window[, noclick])
此方法用于在指定的窗口位置启用拖放选择。它用于调用 mouseup 事件操作。如果您分配 noclick 值为 true，则 click 事件将在零毫秒超时后过期。
拖动 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);
