我正在使用显示有限状态自动机的joint.js开发一个小应用程序。我的问题是，一旦它变得如此之大，图表变得乱七八糟，难以阅读。我需要以这样的方式绘制它，使得用户可以清楚地看到正在发生的事情，而不需要他们进行太多操作。
它有一个开始状态和一个结束状态，所以我把它们分别放在画布的顶部和底部。但我有足够的空间。
可以使用哪种算法来安排州位置，以及它们如何运作？
答案 0 :(得分：1)
可能无法实现状态和连接器的整洁分布。
这一切都取决于你的状态发生了多少反射和递归。
一般来说，如果你的模式适合于线性，那么从左到右线性地排列状态（反之亦然），因为这就是眼睛喜欢可视化变化的方式。
通常情况下，如果您的模式具有高度反射性/递归性，则在中心集线器中以往常活动状态和外部辐条处的活动状态较少的情况下布置状态。
但同样，现实生活是混乱的。这些概括可能都不适用于您的数据。
<强>然而...
您可以使用html画布的动态功能来减少连接器的干扰。
在启动状态下，使每个连接器都不那么明显：
在转换期间激活任何连接时，请使其非常明显。
激活连接后，慢慢将其属性从其高度显眼的可见性设置为不太明显（html canvas非常擅长制作动画）
如果您不需要随时都能看到所有状态，则可以将相同类型的可视队列应用于状态和连接器。
提示：不要忘记颜色！
如果用户暂时是相同的颜色，则用户更容易在心理上连接2个状态。这减少了州之间对粗体连接器的需求。
提示：为用户提供线索！
头脑很快就能找到线索。例如，当2个状态激活时，如果始发状态被1个圆圈包围并且目标状态被2个圆圈包围，则用户将快速接收该模式并在心理上连接这2个状态。这减少了州之间对粗体连接器的需求。
并...
如果用户可以控制您的状态机，用户将更快/更彻底地了解您的过程。
您可以使用滑块让用户按照自己的节奏从开始状态移动到结束状态。他们可以“重播”这些部分以加强他们的理解。
祝你的项目好运 - 听起来很有趣！