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 : 开始一个新指针.

• 拖动 : 拖动活动指针.

• 结束 : 非活动指针.

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