d3js大型力有向图服务器端模拟 [英] d3js large force-directed graph server side simulation

问题描述

正如你可能猜到的，交互式模拟速度很慢，浏览器将被冻结，如其他帖子中所述。

然而，静态力导向图对我来说是不够的，我仍然需要在节点之间用力操纵图形，以获得不错的布局。我不在乎模拟的平滑性。我的目标是：1.浏览器不会被冻结;我可以将节点从一个地方拖动到另一个节点之间的节点之间的力。并且，可视化节点位置的时间间隔可以更长。

我在考虑在node.js中放置节点位置计算。许多文章预渲染d3图在服务器端，但我需要所有的模拟计算在服务器端完成，与前端用户的交互。所以，我可能需要在node.js中注册监听器drag，zoom，mouseover操作。

我不知道是否有

解决方案

如何尝试以下两个选项之一：

1. 在服务器上预渲染强制布局，在客户端，重新运行d3.layout.force（）。因为节点将已经布局，它将不会持续很长时间，并且不会冻结浏览器。




2. 在服务器上，生成带有布局和事件绑定的图形，并将其附加到DOM DocumentFragment 。您可以使用客户端JavaScript将此结构传递给客户端，并将其附加到浏览器DOM。

I am in the situation to create a force-directed graph with couple of thousands nodes.

As you may guess, the interactive simulation is slow, and the browser will be frozen,as also mentioned in other posts.

However, static force-directed graph is not enough for me, and I still need to manipulate the graph with force between nodes to have nice layout. I don't care much about smoothness of simulation. My goal is: 1. the browser will not be frozen; 2. I can drag a node from one place to another with force between nodes for each tick. And, the time interval to visualize node positions can be longer.

I was thinking about putting the node position calculation in node.js. Many articles about pre-rendering d3 graph on the server-side, but I need all simulation calculation be done on the server-side, with the interaction with front-end users. So, I probably need to register listeners to "drag", "zoom", "mouseover" actions in node.js also.

I am not sure whether there is an easy way to do this.

解决方案

How about trying one of these two options:

1. Pre-render the force layout on the server, and on the client side, you re-run d3.layout.force(). Because the nodes will be already layed-out, it won't last long, and won't freeze the browser. Then you register the listeners you need?

2. On the server, generate the graph with its layout and events binding, attaching it to a DOM DocumentFragment. You pass this structure to the client with your client-side javascript, and attach it to the browser DOM.

这篇关于d3js大型力有向图服务器端模拟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！