Dragging API
拖放是d3.js中最熟悉的概念之一。 本章详细介绍了拖动及其方法。
安装 (Installation)
我们可以使用以下脚本直接包含拖动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事件的最大距离。 如果未指定距离，则指向零。
drag.on(typenames, [listener])
此方法用于为指定的类型名称设置事件侦听器以进行拖动。 类型名是一个包含一个或多个由空格分隔的类型名的字符串。 每个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 - 它是一个字符串，可以是以下任何一个 - “开始”，“拖动”或“结束”。
Subject - 拖动主题，由drag.subject定义。
event.on(typenames, [listener])
事件对象公开event.on方法以执行拖动。 它的定义如下。
d3.event.on("drag", dragged).on("end", ended);