mxGraph缩放到布满视图

Question

如何在初始渲染时缩放mxGraph以适应视图？

我已经将容器的宽度和高度设置为100%。我想缩放容器中渲染的mxgraph以适应容器。我该怎么做呢？

function addNodes(nodes, graph, parent) {
    // Needed to connect the edges
    const nodeData = new Object();
    nodes.forEach((node) => {
        nodeData[node.id] = graph.insertVertex(parent, null, node.title, 0, 0, 100, 20, 'defaultVertex;fillColor=' + (node.error ? 'red' : 'green'));
    })
    return nodeData;
}

function addEdges(edges, nodes, graph, parent) {
    edges.forEach((edge) => {
        graph.insertEdge(parent, null, '', nodes[edge.source], nodes[edge.target]);
    })
} 

export function mountGraph(containerName, data) {
    const container = document.getElementById(containerName);
    const graph = new mxGraph(container);

    graph.getModel().beginUpdate();
    const parent = graph.getDefaultParent();
    const nodes = addNodes(data.nodes, graph, parent);
    addEdges(data.edges, nodes, graph, parent);
    const layout = new mxHierarchicalLayout(graph);
    layout.execute(parent);
    graph.getModel().endUpdate();
}

Answer 1

为此，您可以使用mxGraph.fit：Scales the graph such that the complete diagram fits into <container> and returns the current scale in the view.

请注意，如果在调用mountGraph函数后调用fit，将执行2次绘制/渲染。第一个在graph.getModel().endUpdate()调用之后，第二个在graph.fit调用之后。

为了避免这种情况，因为我们希望在渲染之前拟合初始图形，文档建议在更改模型之前将mxGraphView.rendering设置为false，并在拟合之后进行渲染。

在mountGraph函数中，这可能类似于

    graph.view.rendering = false;
    
    graph.getModel().beginUpdate();
    ...
    graph.getModel().endUpdate();

    graph.fit();
    graph.view.rendering = true;
    graph.refresh();