【问题标题】:D3 force directed graph with drag and drop support to make selected node position fixed when droppedD3 强制有向图,具有拖放支持,使选定的节点位置在拖放时固定
【发布时间】:2012-06-09 14:43:25
【问题描述】:

可以在此处找到有关力直接图的示例:http://bl.ocks.org/950642

如何轻松添加对拖放的支持? 它应该将节点设置为固定它放置它的当前位置。 重要的是其余节点仍然使用“力定向模式”来自动定位图中的其余节点

https://github.com/mbostock/d3/wiki/Force-Layout

我玩了一些但没有成功,想知道是否有人能给我一个快速示例,说明如何添加上述支持。

【问题讨论】:

  • 请发布您目前拥有的内容
  • 如果它几乎接近工作的东西,我很乐意发布它。但最好使用给出的示例作为基础,因为这是迄今为止我得到的最接近的示例,也就是没有。无论如何,我昨天一直在思考整个问题,并提出了一些想法。当我有任何进展时,我会发布更新
  • 想法:修改原来的 force.drag 函数,使其在 mouseover/mouseout 时完全不摆弄固定状态

标签: d3.js drag-and-drop force-layout


【解决方案1】:

在发现与连接到节点的两个“拖动”侦听器(您自己的和 force.drag)打架并不理想后,终于让它工作了!

最好只拥有自己的“拖动”监听器并手动调用 tick(),这是让力图在您拖动的节点上的每个新节点位置上为您定位节点的关键功能。

工作示例:http://bl.ocks.org/2883411

【讨论】:

  • 在 FF 中无法正确渲染。要拖动的节点不出现。在 Chrome 中,节点上的图像用于损坏的图像链接。
  • @Spaceghost :更新了 svg 图像以现在使用 github 的 favicon。在 Chrome 中运行良好。当谈到 FF 时,我发现与 Chrome 相比,这些图表的性能很差,因为强制布局算法非常耗费资源。 (使用 iceweasel 版本 10.0.12(debian 中的 debian 版本的 firefox)进行测试。但它也卡在这个版本上:bl.ocks.org/mbostock/1129492,所以我责怪 FF。也许它在新版本中效果更好?
  • 仅供参考,在我使用当前版本的 FF 和 Chrome 的 Macbook Pro 上,Chrome 看起来最好。 FF 看起来很结巴。
  • 设置为 false 后如何在每个节点上重新启用强制?例如这一行 d.fixed = true;在 dragend(...) 中将不再排斥放置在顶部的其他节点。
猜你喜欢
  • 1970-01-01
  • 2020-12-23
  • 1970-01-01
  • 2017-08-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-05
相关资源
最近更新 更多