在 vis js 网络中设置默认比例

Pra*_*jee 1 javascript canvas vis.js vis.js-network

我正在使用 vis.js 库来创建网络拓扑。在我使用以下方法创建网络后:

network = new vis.Network(container, data, options);
Run Code Online (Sandbox Code Playgroud)

其中容器是canvas我正在绘制的。

数据 :

{
    nodes: Nodes,
    edges: Edges
};
Run Code Online (Sandbox Code Playgroud)

选项 :

{ 
    autoResize: true,
    nodes: {
        shape: 'image',
        size:  25,
        font: {
            size: 16,
            color: 'darkbrown'
        },
        borderWidth: 0,
        shadow: true
    },
    edges: {
        smooth: {
            forceDirection: "none"
        }
    },
    physics: {
        forceAtlas2Based: {
            springLength: 80,
            springConstant: 0.27
        },
        minVelocity: 0.75,
        solver: "forceAtlas2Based",
        timestep: 0.34
    },
    layout: {
        randomSeed: undefined
    },
    interaction: {
        hover: true
    }
}
Run Code Online (Sandbox Code Playgroud)

绘制后,默认比例(1)相对于我的画布非常大。我想调整比例。我试过这种方式:

network = new vis.Network(container, data, options); //network is drawn

var scaleOption = { scale : 0.5 }; -(1) 

network.moveTo(scaleOption); -(2)
Run Code Online (Sandbox Code Playgroud)

这种方式行不通。但是,如果 (1) 和 (2) 在特定事件中被触发,请说:

network.on("click",function(params) {

    var scaleOption = { scale : 0.5 };
    network.moveTo(scaleOption);
}); 
Run Code Online (Sandbox Code Playgroud)

有用。我需要在开始时设置比例,即在绘制拓扑之后(在任何此类事件发生之前)。AfterDrawing绘制拓扑后会持续触发事件,因此也会失败。有什么办法可以解决这个问题?

Sou*_*nti 6

使用stabilized事件和once方法在第一次绘制网络时缩小它。

network.once('stabilized', function() {
    var scaleOption = { scale : 0.5 };
    network.moveTo(scaleOption);
})
Run Code Online (Sandbox Code Playgroud)

  • network.once('startStabilizing', function() { var scaleOption = { scale : 0.8 }; network.moveTo(scaleOption); }); 这个最适合我 (2认同)