飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • AngularJS教程
  • UEditor使用文档
  • ThinkPHP5.0教程

D3.js 拖动(drag) API

时间:2021-12-17  作者:匿名  

拖放是 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([主题])

用于将主题设置为指定的拖动功能,定义如下。

function subject(d) {
   return d = =  null ? {x: d3.event.x, y: d3.event.y} : d;}

在这里,主题代表被拖动的东西。例如,如果要在 SVG 中拖动矩形元素,则默认主题是被拖动矩形的基准。

drag.clickDistance([距离])

此方法用于设置单击 mousedown 和 mouseup 事件的最大距离。如果未指定距离,则它指向零。

drag.on(typenames, [listener])

该方法用于设置拖拽指定类型名的事件监听器。typenames 是一个字符串,包含一个或多个由空格分隔的类型名。每个 typename 都是一个类型,可选后跟一个句点 (.) 和一个名称,例如 drag.one 和 drag.two。这种类型应该来自以下之一 -

  • start - 开始一个新的指针。

  • 拖动- 拖动活动指针。

  • end - 不活动的活动指针。

d3.dragDisable(窗口)

此方法用于禁用拖放选择。它可以防止 mousedown 事件操作。大多数选定的浏览器默认支持此操作。如果不支持,您可以将 CSS 属性设置为 none。

d3.dragEnable(window[, noclick])

该方法用于在指定的窗口位置启用拖放选择。用于调用 mouseup 事件动作。如果您将 noclick 值指定为 true,则单击事件会在零毫秒超时后到期。

拖动 API - 拖动事件

D3.event 方法用于设置拖动事件。它由以下字段组成 -

  • 目标- 它代表拖动行为。

  • 类型- 它是一个字符串,可以是以下任何一种——“开始”、“拖动”或“结束”。

  • 主题- 拖动主题,由 drag.subject 定义。

event.on(typenames, [listener])

事件对象公开了 event.on 方法来执行拖动。它的定义如下。

d3.event.on("drag", dragged).on("end", ended);
搜你所爱
D3教程:目录
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。