在强制布局上拖动会阻止其他 mouseup 侦听器

2024-03-26

我想在 d3.js 强制布局中启用拖动。当拖动一个圆圈并释放鼠标按钮时,我想通过回调调用特定的函数,如下所示:

this.force = d3.layout.force()
    .nodes(this.nodes)
    .size([this.width, this.height]);

// enable dragging
this.circle
    .call(this.force.drag)
    .on("dragend", function() {
        console.log("You should see this, when releasing a circle.");
    })
    .on("mouseup.drag",function(d,i) {
        console.log("Or see this.");
    });

不幸的是,force.drag 处理程序从未完全触发/消耗该事件。 那么如何在拖动结束时在 d3 力布局中执行给定的回调函数呢?


你没有打电话给"dragend"事件于this.force.drag这里。 这也取决于你如何定义this.force.drag.

这应该适合你

myCustomDrag = d3.behavior.drag()
    .on("dragstart", function(d,i){
        //do something when drag has just started
    })
    .on("drag", function(d,i){
        //do something while dragging
    })
    .on("dragend", function(d,i){
        //do something just after drag has ended
    });

在上面的代码中,只需使用call(myCustomDrag)在您希望出现此拖动行为的元素(此处为圆圈)上。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在强制布局上拖动会阻止其他 mouseup 侦听器 的相关文章

  • d3.js:非线性图轴

    我正在尝试在轴上添加自定义比例 如下所示 这个想法是 一个刻度总是比前一个刻度大 2 倍 我的理解是 这是一个定制秤 我做了一些研究 但找不到类似的东西 所以我想我的问题实际上是两个问题 这个尺度是数学世界的 标准 吗 这是否可以使用来实现
  • 暂停和恢复过渡

    我在用setInterval 因此转换会在一定时间间隔后发生 是否可以使用 setInterval 暂停和恢复工作 任何正确方向的建议 指示都会非常有帮助 这个问题是在 D3 v3 是最新版本时发布的 5年后D3 v5有了一些新方法 比如s
  • 将元素添加到 D3 圆包节点

    我正在尝试制作一个可缩放的圆形包装图 我希望每个子圆圈包含一个较小的图表 该图表始终具有相同的结构 即 4 列 只有条形的高度会改变 我尝试添加一个简单的rect到目前为止我的图表 但矩形没有添加到圆圈中并且是静态的 JS var marg
  • 将任何 D3.js 图表与 DC.js 集成

    我试图弄清楚如何轻松地将任何 D3 js 图表与 DC js 库集成 以便在所有图表之间使用交叉过滤功能 我也确实理解以前曾问过这种性质的问题 添加链接以供参考 DC js 监听图表组渲染 https stackoverflow com q
  • 在 d3 中应用转换时出现错误

    我正在尝试对我在 d3 中设计的条形图应用一些过渡效果 这是我的代码 svg selectAll bar data data enter append g attr class bar append rect attr rx barRadi
  • 反转比例函数

    这对我来说很有趣 看下面的D3代码 var scale d3 scale linear domain 100 500 range 10 350 scale 100 Returns 10 scale 300 Returns 180 scale
  • Angular2:鼠标事件处理(相对于当前位置的移动)

    我的用户应该能够通过鼠标在画布中移动 或旋转 对象 当鼠标事件发生时 屏幕坐标用于计算与最后一个事件的增量 方向和长度 没什么特别的 mousedown 获取第一个坐标 mousemove 获取第n个坐标 计算deltaXY 按deltaX
  • 在 Crossfilter 中使用过滤器

    我刚刚开始使用 crossfilter 和 d3 js 我正在尝试 API 参考中给出的一些片段 我有以下数据 var payments crossfilter date 2011 11 14T16 17 54Z quantity 2 to
  • JavaScript 的事件常量?

    在 Javascript 中我有这样的代码 document addEventListener mousedown mouseDownHandler 有时我可能会发胖手指 document addEventListener mouzedow
  • d3.js 堆叠条形图 - 修改堆叠顺序逻辑

    我想创建一个堆积条形图 其中矩形的顺序由数据值确定 即最大到最小 最高到最短 最富有到最贫穷等 据我所知 在堆叠数据后 initial秩序似乎得到保留 这可以在我的代码片段中看到 硬编码数据让我们可以看到之前和之后发生的情况d3 stack
  • D3 将现有 SVG 字符串(或元素)追加(插入)到 DIV

    我到处寻找这个问题的答案 并找到了一些我认为可能有用的资源 但最终没有让我找到答案 这里有一些 外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu
  • d3.js:修改树布局中的链接

    抱歉我的英语不好 我在这里使用这个例子 http bl ocks org mbostock 4339083 http bl ocks org mbostock 4339083构建树形图 但我用矩形更改了根的子级中的圆圈 现在该图有点混乱 因
  • 当以编程方式触发 d3.behavior.zoom 事件时,如何设置平移和缩放的初始值?

    下面示例中的方块是具有初始平移和比例设置的 SVG 组的一部分 单击正方形会启动缩放过渡 但过渡设置的初始值与我的默认值不同 这一点从过渡开始时的不和谐就可以明显看出 如何在以编程方式启动的缩放过渡上设置平移和缩放的初始值 var svg
  • 增加 D3 图中边缘的可点击区域

    我有一个由 d3 制作的图 dagre d3 位于其顶部用于绘制有向图 这给出了我对渲染图表的期望 要编辑构建图表的数据 每个元素都是可单击的 这对于使用标签渲染边缘的情况来说很好 但它们并不总是有标签 导致未标记的边缘很难单击进行编辑 分
  • 如何在“object”标签内选择 SVG?

    HTML 页面的内容如下所示 方法如下script js looks var tooltip d3 select body append div style position absolute sty
  • D3更新circle-pack数据新节点与现有节点重叠

    我正在关注一般更新模式 http bl ocks org mbostock 3808234但在分层方面存在问题 使用圆形包装布局 我pack新数据 update enter and exit圆形元素 然而 当新元素enter 它们重叠upd
  • d3.js比例符号图:根据数据值设置圆的半径

    我正在遵循这个关于如何使用 d3 js 和 mapbox 制作地图的精彩示例 https franksh com posts d3 mapboxgl https franksh com posts d3 mapboxgl 它工作得很好 除了
  • 如何纠正 Highcharts 中的鼠标事件

    我正在尝试绘制 xy 线 其中 y 轴反转 并且我得到了图 但是mouse event我无法纠正它 它显示反向事件 我想自动找到轴的最小值和混合 如何做到这一点 以及如何将 x 轴置于顶部 这是我的代码 JS function var ch
  • Dimple.js - 将数据标签添加到条形图的每个条形

    我使用的是dimple js 它基于d3 js 是否可以向本示例中提到的条形图的每个条形添加数据标签http dimplejs org examples viewer html id bars vertical http dimplejs
  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图

随机推荐

  • 如何在 MS Graph 中检索 DriveItems 的自定义列

    我正在尝试使用 Graph API 检索 Sharepoint 文档库中的文件层次结构 由于文档库存储在 驱动器 中 将其称为 OneDrive 在技术上是否正确 我使用的是 drives端点来获取文件列表 如下所示 https graph
  • 多核ARM cpu上的中断如何工作

    这个问题已经针对 x86 得到了解答 但是 我找不到太多关于 ARM MP cpu 如 Cortex A9 Cortex A15 等 的信息 更重要的是我想知道是否可以在非主CPU上引发中断而无需任何配置等 我正在开发一款仅处理主 cpu
  • 确定 gcry_cipher_decrypt 解密数据的大小?

    我使用的是 AES GCM 但以下是其他模式 如 AES CBC 的一般问题 我有以下电话libgcrypt define COUNTOF x sizeof x sizeof x 0 define ROUNDUP x b x x b 1 b
  • Android - 创建自定义 SearchView

    我有一个列表活动 其中包括 SearchView 和 ListView 我希望 SearchView 类似于谷歌地图 Android 应用程序中的内容 目前我在activity main xml中的SearchView代码是
  • 具有 +1 逻辑的 4 位计数器 D 触发器

    我正在尝试通过 Verilog 实现带有 1 逻辑的 D 触发器计数器 但是我收到了很多有关网络多个常量驱动程序的错误代码 有人可以帮我吗 这是到目前为止的代码 module LAB clk clear Enable Q input clk
  • 将 margin-bottom 添加到页脚之前的图像

    我想看看是否有办法添加margin bottom to an img仅当元素后跟一个footer元素 目前我正在使用一个特殊的类 image before footer 在我最后一次img元素来实现这一点 但想知道是否有办法在 CSS 中动
  • 有没有人能够成功使用 albahari.com 的 PredicateBuilder 来对抗 MongoDB?

    我使用 albahari com 中流行的 PredicateBuilder 编写了以下代码 var predicate PredicateBuilder False
  • 增加tomcat 7中的并发连接数

    想知道如何增加tomcat 7中的并发连接数 我做了一些研究 从apache文档中发现 设置acceptCount maxConnections的值并增加maxThreads可以做到这一点 但是当尝试时 我只能提交500个请求1000 下面
  • 多字段匹配查询

    我对弹性搜索相当陌生 想编写一个涉及两个字段的查询 我的意思是字段的内容包含指定的子字符串 我有一个包含字段的文档 如下所示 name n tag t 我试过这个 search d query match name n tag t 但查询结
  • androidx.legacy:legacy-support-v4: 依赖有什么用

    我正在实现 Android Room 数据库 在其中一篇教程中我发现了使用androidx legacy legacy support v4 1 0 0依赖性 谁能告诉我这种依赖关系的用途 androidx legacy legacy su
  • Linux 上的 PHP 和 RAW Sockets

    做一个就足够了 sudo setcap cap net raw eip usr bin php5 能够在 Linux 中的 PHP 而不是 CLI 中使用 RAW SOCKETS 吗 如果是 那么它不起作用 但开始在 CLI 中工作但不使用
  • 如何在 C# 中解析 HTTP url?

    我的要求是解析 Http URL 并相应地调用函数 在我当前的实现中 我使用嵌套的 if else 语句 我认为这不是一种优化的方式 您能建议其他一些有效的方法吗 网址是这样的 server func1 server func1 SubFu
  • 使用服务主体对 GetReportInGroupAsync PowerBI Embedded API 调用进行未经授权的响应

    我正在尝试将 Power BI 报告嵌入到我的 Net Core 应用程序中 但是我无法从请求中获得有效的响应 我正在使用 Microsoft PowerBI API 包和通过服务主体注册的 azure 应用程序 据我所知 我已按照此处的说
  • 在没有包装器的情况下在 QT 上使用 OpenGL [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个与 OpenGL 结合使用的 GUI 工具包 QT 看起来很有前途 但不幸的是它将大多数
  • 在 Angular 中旋转伪 3D 轮播

    我正在尝试创建一个伪 3d 轮播 其中包含 5 个项目 如下所示 并让它们循环 我发现这很棒堆栈闪电战 https stackblitz com edit angular ivy sqt1uq file src 2Fapp 2Fapp co
  • 一般替换 Angular 2 路由参数并导航

    我正在构建一个 Angular 应用程序 其中大多数路由都属于给定项目并包含一个projectId 顶部导航区域将有一个项目的下拉列表 当用户从下拉列表中选择一个项目时 它需要导航到当前路线 但将 projectId 替换为新值 这非常类似
  • NameError:未定义全局名称“numpy”

    我正在尝试通过收集 essentia 一个 MIR 库 函数来编写一个特征提取器 流程图如下 单独的特征提取 池化 PoolAggregator 使用poolAggregator连接形成整个特征列表np concatenate 即使不导入
  • 如果屏幕上显示多个二维码,请扫描二维码

    我正在开发一个Android示例应用程序作为一个学术项目 我需要扫描二维码 我使用了二维码扫描库 如果屏幕上只有一个二维码 我能够成功检测到二维码 是的 我想扫描二维码 尽管相同的二维码一次显示在屏幕上的多个位置 例如 在我的笔记本电脑屏幕
  • Nginx:何时使用 proxy_set_header 主机 $host 与 $proxy_host

    我一直在阅读反向代理 想知道什么时候proxy set header Host host是适当的proxy set header Host proxy host 我做了一些研究本文 https www digitalocean com co
  • 在强制布局上拖动会阻止其他 mouseup 侦听器

    我想在 d3 js 强制布局中启用拖动 当拖动一个圆圈并释放鼠标按钮时 我想通过回调调用特定的函数 如下所示 this force d3 layout force nodes this nodes size this width this