Question

我正在尝试将Dagre扩展名用于Cytoscape，但对于我的一生，我无法使其正常工作。我可以使用“内置”图，尽管没有一个适合我的目的（对流程图进行故障排除）。据我所知，使用扩展（至少是这一扩展）的文档基本上是不存在的。代码如下：

HTML：

<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="..\E-FIM\styles\flowchartPageStyle.css" />
    <script type="text/javascript" src="../E-FIM/Cytoscape/dist/cytoscape.js"></script>
    <%--<script type="text/javascript" src="../E-FIM/Cytoscape/dist/cytoscape.min.js"></script>--%>
    <script type="text/javascript" src="../E-FIM/Cytoscape/dagre/dist/dagre.js"></script>
    <%--<script type="text/javascript" src="../E-FIM/Cytoscape/dagre/dist/dagre.min.js"></script>--%>
    <script type="text/javascript" src="../E-FIM/js/flowchart.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="lblTitle" CssClass="lblTitle" runat="server" Text=""></asp:Label>
            <div id="cy" class="cy"></div>
        </div>
        <asp:SqlDataSource ID="dsEfim" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectEFIM %>" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
    </form>
</body>

JS：

    function ReceiveServerData(arg, context)
    {
        document.getElementById("cy").style.width = "1180px";
        document.getElementById("cy").style.height = "710px";
        cytoscape.use(dagre);

        var cy = cytoscape({
            container: document.getElementById("cy"),
            style: [ // the stylesheet for the graph - move this to CSS file when finalized

                //Style nodes
                { selector: "node", style: { "opacity": "1", "width": "200px", "height": "50px", "text-halign": "center", "text-valign": "center", "text-wrap": "wrap", "text-max-width": "150px", "border-width": "1px", "border-color": "#010006", "background-color": "white", "label": "data(text)", "font-size": "10px" } },

                //Style node lines
                { selector: "edge", style: { "curve-style": "bezier", "font-size": "10px", "width": "1", "line-color": "#010006", "target-arrow-color": "#010006", "target-arrow-shape": "triangle-backcurve", "target-endpoint": "0deg", "arrow-scale": ".8" } }]
        });

        layoutOptions = {
            name: "dagre"// "breadthfirst",
            //fit: false, //false for production
            //directed: true,
            //padding: 1,
            //circle: false,
            //spacingFactor: 1.3,
            //avoidOverlap: false,
            //nodeDimensionsIncludeLabels: true
        };
        ...
    cy.layout(layoutOptions).run();
    }

过去4天内，我一直在寻找解决方案，但无济于事。显然，我做错了事，但我不清楚那是什么。

那么，诀窍是什么？

如何使用cytoscape扩展？

0 个答案: