在强制布局上拖动会阻止其他 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 侦听器 的相关文章

  • 将数据从 csv 复制到 D3 中的数组中

    我知道这个问题以前曾被问过 但由于某种原因 他们的解决方案对我不起作用 我正在尝试使用 CSV 文件中的数据填充两个数组 其中 name value alpha 34 beta 12 delta 49 gamma 89 我现在正在尝试的是
  • d3树计算所有孩子的数量

    我有一个基于以下内容的 d3 树 http bl ocks org mbostock 1093025 http bl ocks org mbostock 1093025 我如何计算所有孩子的数量 我已经尝试过这个 但是它计算了树中的所有行
  • 在三角形内强制图表 d3.js

    我正在研究 d3 js 力图 我有一个问题 是否可以在具有某些坐标的三角形内制作力图 这是我的代码 var width 500 var height 500 margin var marginLeft 10 var marginTop 10
  • d3.js:是否可以通过键而不是索引来进行转换?

    我有不同长度的数据数组 x值 年 是有限年数的一部分 例如 var data Year 2008 Value 5 Year 2009 Value 6 or var data Year 2007 Value 8 Year 2009 Value
  • 调整小倍数迷你图

    我有一个热图 显示一些数据和热图每行的迷你图 如果用户单击行标签 则数据按降序排列 因此每个矩形都会放置在正确的位置 反之亦然 如果用户单击列标签 每个反应都以正确的方式放置 但我无法放置迷你图 这是代码 http plnkr co edi
  • 数据与线的日期和时间转换

    我使用 D3 V5 创建了此图表 另外 我已在小提琴上附加了示例数据 您可以点击此处查看 https plnkr co edit pINxcS9yt9AuJmSk02Fs p preview 我已经包括了tick函数代码块 它在向左滑动的路
  • 使用不同颜色的 dc.js 显示原始(有条件)拉丝未拉丝交叉过滤器条

    假设我们有以下 crossfilter dc js 应用程序 虽然这很好 但用户在刷牙时会失去对人群的 参考 我想要图表x y z and a在刷其他图表时保留 基础 柱 也许是不同的颜色 如下所示 我相信这可能需要更新dc renderA
  • d3.js v4 中的 d3.locale(),本地化

    我正在使用 d3 js 制作图表 现在想将其更新到 v4 结果发现d3 locale 由于所有日期格式的翻译都采用不同的语言 因此不再起作用 我该如何解决这个问题 我正在挖掘论坛 但对于 v4 我并没有真正找到它 你必须使用d3 timeF
  • 鼠标在两个视图上移动,如何让它们都处理`ACTION_MOVE`事件

    我有两个视图 较大的一个在底部 较小的一个在顶部 如下图所示 现在我在 view1 view2 外部 上按鼠标 然后移动到 view2 我发现即使鼠标在移动过程中位于view2内部 view2也不会得到ACTION MOVE事件 只有vie
  • 使用 CSV 文件填充下拉列表 - d3

    我想在 html 中填充简单的下拉列表 使用 csv 文件中存在的值 我尝试类似的方法 但它不起作用
  • d3.select 不适用于特殊字符

    我正在使用 d3 js 处理简单的图表 假设下面的 div 是我计划放置 d3 的 svg 容器的地方 div 但是当我使用 d3 select my div chart 我无法选择特定的 div 但是通过使用 java 脚本选择器 它可以
  • 寻找一种重构 D3.js 风格的方法链接模式的方法

    在学习 D3 js 时 我遇到了博客文章 http bost ocks org mike chart 解释其可重用代码单元背后的主要设计模式 我复制了下面的相关代码 下面呈现的模式的方式正是在 D3 代码库和插件中使用的方式 example
  • d3.js。带条的旋转地球仪

    我正在尝试创建带有像这样的酒吧的旋转地球仪这个例子 http data arts appspot com globe 你可以看我的例子here http jsfiddle net zeleniy jrh5xucs 一切都很顺利 直到酒吧超出
  • 检测可可上的鼠标右键单击

    我正在尝试在我的原型中管理鼠标事件精灵套件 game 我从问题中使用了以下方法SO q https stackoverflow com questions 17473176 how to detect right and left clic
  • 使用Linux虚拟鼠标驱动

    我正在尝试实施一个虚拟鼠标驱动程序根据基本 Linux 设备驱动程序书 有一个用户空间应用程序 它生成坐标以及内核模块 See 虚拟鼠标驱动程序和用户空间应用程序代码 http www embeddedlinux org cn Essent
  • 如何使用 d3.v4 中的 JSON 数据创建树布局 - 不使用 stratify()

    我正在尝试将一些 d3 代码从 v3 更新到版本 4 我有一个使用 JSON 数据的树形图 d3 v4 示例展示了如何使用 stratify 将表格数据 例如flare csv 转换为分层数据https bl ocks org mbosto
  • 使用 D3.js 解析时间序列数据

    是时候寻求帮助了 我已经学习 D3 js 几个星期了 我才开始觉得我理解了其中的 10 哈哈哈 我正在尝试生成一个非常简单的线图 只要数据非常简单 我就可以做到这一点 但我的原始数据源具有 UTC 时间戳和实数 小数 这会导致任何超出简单范
  • 为什么 SetCursorPos 将光标位置重置到显示屏的左侧?

    SetCursorPos https learn microsoft com en us windows win32 api winuser nf winuser setcursorpos将光标移动到指定的屏幕坐标 然而 它似乎有一个错误
  • d3.js:非线性图轴

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

    这对我来说很有趣 看下面的D3代码 var scale d3 scale linear domain 100 500 range 10 350 scale 100 Returns 10 scale 300 Returns 180 scale

随机推荐

  • 如何在 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