15

我想在 d3 中可视化一个 20K 节点依赖图。诸如http://bl.ocks.org/mbostock/1153292之类的力导向图太慢，无法在浏览器中渲染这么多节点。

基本上我想表示包含文本的节点和从一个节点到另一个节点的有向边，并添加缩放和平移功能。我该如何在 d3 中执行此操作？

有向依赖图

4

2 回答 2

7

这是一个似乎不使用强制布局节点的替代方案 - 没有弹跳，性能良好，并且内置了上传/下载设施。它的许可证是 MIT/X：

使用 d3.js 创建有向图的交互式工具

有向图创建者

手术：

  • 拖动/滚动以翻译/缩放图形
  • 按住 shift 单击图形以创建节点
  • shift-click 一个节点，然后拖动到另一个节点以将它们与有向边连接
  • shift-click 一个节点来改变它的标题
  • 单击节点或边缘并按退格键/删除键删除

github快照

于 2015-04-28T00:57:33.683 回答
6

缩放行为（和平移）基本上可以通过缩放行为免费获得。你必须自己做的布局——强制布局几乎是 D3 中唯一可以用来布局这种图形的东西。

无论您使用什么，如果有 20K 节点，任何动态的东西都会非常缓慢——简单地渲染所有元素将花费相当长的时间，在此期间浏览器似乎没有响应。您可能要考虑的另一种方法是使用更适合大量数据的东西预渲染图形，将结果保存为图像（甚至静态 SVG）并在顶部添加一点 D3 代码以进行缩放/平移.

于 2013-10-15T19:43:00.593 回答