Categories
D3.js教程

D3.js-拖动API

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.container([container])
  • drag.filter([过滤器])
  • drag.subject([subject])
  • drag.clickDistance([distance])
  • drag.on(typenames,[listener])
  • d3.dragDisable(窗口)
  • 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])

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

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);
error: 内容受到保护 !!