jointjs - 如何将 jointjs 图形与纸张的中心/中间水平对齐，流向从上到下？

Question

我有一个使用 JointJs 生成的图形，它使用 jointjs 提供的 Dagre 布局。目前，图表从上到下对齐，这是正确的方式，但随后完整的图表将对齐到纸张的左侧。

我需要图表在纸的中间水平对齐。

当前使用的配置是这样的:

joint.layout.DirectedGraph.layout(graph,
  {
    rankDir: "TB",
    marginX: 30,
    marginY: 30,
    clusterPadding: {
      top: 10,
      left: 10,
      right: 10,
      bottom: 10
    }
  }

我看到让图表从上到下流动的选项是 rankDir: "TB"。是否有任何类似的选项可以将其水平对齐到中间而不是默认情况下的左侧？或任何其他方式。

Answer 1

调用 directedGraph.layout 后，您可以使用 Paper 类使图表居中。

const paper = new joint.dia.Paper({
      height: 1000,
      width: 1000,
      ...
});

const paperArea = paper.getArea();
const contentArea = paper.getContentArea();

paper.translate((paperArea.width - contentArea.width) / 2, (paperArea.height - contentArea.height) / 2);

这将使图表有效居中，但应注意避免内容大于纸张尺寸。