Question

我目前正在使用允许用户创建策略的系统。策略可以由规则，开始操作和停止操作组成。（规则是根据运算符/表达式构建的-类似于“逻辑门”的部分）

我一直在使用Vis.js来做到这一点。我只是将一些JSON传递到前端，然后使用递归方法来构建网络，如图所示。

在大多数情况下，这很好用，并且节点的位置应使图可读。但是，偶尔我会得到类似于屏幕截图中所示的图表，其中运算符（AND / OR）与表达式（橙色矩形）之间的链接不必要地交叉（希望第二个屏幕截图显示这一点！）。

在坚持“分层”视图的同时，有人对我可以解决此问题有什么建议吗？有没有一种方法可以保存和加载网络中节点的位置？我可以实现自定义布局管理器吗？这只是我解析JSON来构建图表的方式吗？

下面使用的选项（我知道其中有些是多余的，但仍在进行中）

options = {
    physics: {
        enabled: false
    },
    manipulation: {
        enabled: false,
        initiallyActive: true,
        addEdge: function(edgeData,callback) {
            if (edgeData.from === edgeData.to) {
                var r = confirm("Do you want to connect the node to itself?");
                if (r === true) {
                    callback(edgeData);
                }
            }
            else {
                callback(edgeData);
            }
        },
        addNode: function(nodeData,callback) {
            callback(nodeData);
        }
    },
    layout: {
        randomSeed: 270238,
        improvedLayout: false,
        hierarchical: {
            enabled:true,
            levelSeparation: 150,
            nodeSpacing: 100,
            treeSpacing: 20,
            blockShifting: true,
            edgeMinimization: false,
            parentCentralization: true,
            direction: 'LR',        // UD, DU, LR, RL
            sortMethod: 'directed'   // hubsize, directed
        }
    },
    interaction: {
        dragNodes :true,
        tooltipDelay: 3600000      // Set a really big delay - one hour
    },
    edges: {
        smooth: {
            type: 'continuous',
            forceDirection: 'none'
        },
    },
    nodes: {
        fixed: {
            x:false,
            y:false
        },
        widthConstraint: {
            minimum: 50,
            maximum: 100
        }
    },
    locale: 'mm',
    locales: locales,
},

节点在分层布局中的位置以构建“逻辑门”，如图

0 个答案: