时间戳

首页 > 解决方案 > 如何在 cytoscape.js 中垂直对齐 dagre 父节点

cytoscape.js - 如何在 cytoscape.js 中垂直对齐 dagre 父节点

问题描述

我有一个使用 dagre 扩展在 cytoscape.js 中制作的图表，如下所示：

如何让父节点垂直排列？由于仅对父节点应用单独的布局不起作用（它适用于所有节点），我很难过。

标签： cytoscape.jsdagre

解决方案

不幸的是，它们都是维护不善的可视化算法，因此它们没有那么多功能。

我建议您在算法存储库中打开一个问题，在其中解释如何改进它。在这种情况下，您希望有一个更好的可视化方面。 https://github.com/cytoscape/cytoscape.js-dagre

您还可以为 dagre 项目做出贡献，将这个美学标准添加到图表中。

最后，如果您想要更好的方面，您可以在布局执行后对图表应用 tweek。因此，您可以考虑一种使父节点垂直排列的算法，然后在代码中应用。

例如，你可以做一些事情来让节点离他们的父亲最近，而且你可以在杠杆 n 中对他们父亲的重心的级别 n + 1 中的节点进行排序。（让我知道我是否已经说清楚了）

我从照片中看到你有组，组内的节点有不同的父亲，所以如果你把节点与他们的父亲对齐，那么你可以

  1. 重叠的节点
  2. 重叠组
  3. 宽度过大的组

（让我知道我是否已经把问题说清楚了）

我记得你如何在 cytoscape.js 中定位节点

cyGraph.startBatch(); // for bach the differences and apply only once at the end

// random layout. you have to use yours
cyGraph.nodes().positions(( node, i ) => {
  return {
    x: Math.random() * cyGraph.width(),
    y: Math.random() * cyGraph.height(),
  };
});


cyGraph.endBatch();

推荐阅读