Question

我最近发现了Cytoscape.js并想尝试强制导向的布局：arbor和springy。

现在，我有几个问题：

是否可以通过使用其中一种布局来实现图形，其中节点放置基于某种算法并且节点坐标不是必需的？例如，在VivaGraphJS中，图形会聚，以便连接的节点形成组，并且单个节点移动到外围。如果可以在力导向布局上完成，可以关闭力，以便可以在画布上自由选择和拖动节点吗？
Cytoscape如何实际处理大图（节点数/边数）？
假设每个节点和边缘都有五个属性，我想要一个在鼠标悬停时显示这些属性的文本框。最简单的方法是什么？
Wiki说可以添加单个节点，如下所示，但cy没有节点功能;这是一个错误吗？ var n0 = cy.node（“n1”）; cy.add（N0）; //添加一个元素，n0
我尝试创建一个使用Arbor / Springy的简单随机数据图。下面的代码给出了错误 “return data.cy”中的“数据未定义”。当布局“随机”时，代码可以正常工作。我做错了什么？

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
    .full-height { height: 600px; margin: 0 0; padding: 0 0; }
    </style>

    <script src="jquery-1.7.2.js"></script>
    <script src="demo/cytoscape.all.js"></script>
    <script src="demo/extensions/cytoscape.layout.arbor.js"></script>
    <script src="demo/extensions/cytoscape.layout.springy.js"></script>


    <script src="demo/arbor.js"></script>
    <script src="demo/arbor-tween.js"></script>
    <script src="demo/springy.js"></script>


    <script type='text/javascript'>
        function onLoad() {

             // create a mapper for node size
            var nodeSizeMapper = {
                continuousMapper: {
                    attr: {
                        name: "weight",
                        min: 0,
                        max: 40
                    },
                    mapped: {
                        min: 5,
                        max: 25
                    }
                }
            };

            $("#cy").cytoscape( {
                layout: { name: "arbor" }, // works when "random"
                style: {
                    selectors: {
                        "node":{
                            shape: "ellipse",
                            fillColor: "#3366FF",
                            height: nodeSizeMapper,
                            width: nodeSizeMapper,
                            labelText: {
                                passthroughMapper: "id"
                            }
                        },
                        "edge": {
                            lineColor: "#CCFF33",//"#ccc",
                            targetArrowColor: "#CCFF33", //"#ccc",
                            width: {
                                continuousMapper: {
                                    attr: {
                                        name: "weight",
                                        min: 20,
                                        max: 35
                                    },
                                    mapped: {
                                        min: 1,
                                        max: 3
                                    }
                                }
                            },
                            targetArrowShape: "triangle",
                            // labelText: {
                            //     passthroughMapper: "weight"
                            // }
                        },
                        "node:selected": {
                            fillColor: "#333"
                        },
                        "edge:selected":{
                            lineColor: "#666",
                            targetArrowColor: "#666"
                        }
                    }
                },                    
                ready: function(cy) { },
            });
            window.cy = $("#cy").cytoscape("get");

            $.getJSON('edges_nodes.json', function(elements) {
                //console.log(elements);
                window.elements = elements;
                cy.load( elements );
            });
        }
    </script>
</head>

<body onload="onLoad()">
        <div class="full-height" id="cy">
        </div>
</body>
</html>

JSON文件显示为：

{"nodes": [{"classes": "b", "data": {"id": "n0", "weight": 40}}, {"classes": "b", "data": {"id": "n1", "weight": 19}}, {"classes": "c", "data": {"id": "n2", "weight": 0}}, {"classes": "d", "data": {"id": "n3", "weight": 19}}, {"classes": "e", "data": {"id": "n4", "weight": 4}}, {"classes": "a", "data": {"id": "n5", "weight": 21}}, {"classes": "e", "data": {"id": "n6", "weight": 13}}, {"classes": "a", "data": {"id": "n7", "weight": 6}}, {"classes": "a", "data": {"id": "n8", "weight": 10}}, {"classes": "b", "data": {"id": "n9", "weight": 6}}, {"classes": "c", "data": {"id": "n10", "weight": 24}}, {"classes": "c", "data": {"id": "n11", "weight": 14}}, {"classes": "e", "data": {"id": "n12", "weight": 11}}, {"classes": "b", "data": {"id": "n13", "weight": 6}}, {"classes": "e", "data": {"id": "n14", "weight": 24}}, {"classes": "b", "data": {"id": "n15", "weight": 26}}, {"classes": "b", "data": {"id": "n16", "weight": 6}}, {"classes": "c", "data": {"id": "n17", "weight": 36}}, {"classes": "a", "data": {"id": "n18", "weight": 7}}, {"classes": "b", "data": {"id": "n19", "weight": 37}}, {"classes": "c", "data": {"id": "n20", "weight": 28}}, {"classes": "d", "data": {"id": "n21", "weight": 11}}, {"classes": "d", "data": {"id": "n22", "weight": 20}}, {"classes": "e", "data": {"id": "n23", "weight": 7}}, {"classes": "b", "data": {"id": "n24", "weight": 31}}, {"classes": "b", "data": {"id": "n25", "weight": 1}}, {"classes": "e", "data": {"id": "n26", "weight": 29}}, {"classes": "d", "data": {"id": "n27", "weight": 31}}, {"classes": "d", "data": {"id": "n28", "weight": 34}}, {"classes": "b", "data": {"id": "n29", "weight": 40}}, {"classes": "d", "data": {"id": "n30", "weight": 38}}, {"classes": "b", "data": {"id": "n31", "weight": 17}}, {"classes": "a", "data": {"id": "n32", "weight": 39}}, {"classes": "d", "data": {"id": "n33", "weight": 4}}, {"classes": "c", "data": {"id": "n34", "weight": 38}}, {"classes": "d", "data": {"id": "n35", "weight": 13}}, {"classes": "b", "data": {"id": "n36", "weight": 15}}, {"classes": "a", "data": {"id": "n37", "weight": 29}}, {"classes": "a", "data": {"id": "n38", "weight": 2}}, {"classes": "d", "data": {"id": "n39", "weight": 35}}, {"classes": "c", "data": {"id": "n40", "weight": 24}}, {"classes": "c", "data": {"id": "n41", "weight": 7}}, {"classes": "e", "data": {"id": "n42", "weight": 24}}, {"classes": "c", "data": {"id": "n43", "weight": 4}}, {"classes": "d", "data": {"id": "n44", "weight": 40}}, {"classes": "a", "data": {"id": "n45", "weight": 19}}, {"classes": "b", "data": {"id": "n46", "weight": 17}}, {"classes": "b", "data": {"id": "n47", "weight": 36}}, {"classes": "b", "data": {"id": "n48", "weight": 26}}, {"classes": "a", "data": {"id": "n49", "weight": 18}}], "edges": [{"data": {"source": "n5", "id": "e0", "weight": 31, "target": "n19"}}, {"data": {"source": "n37", "id": "e1", "weight": 31, "target": "n25"}}, {"data": {"source": "n19", "id": "e2", "weight": 31, "target": "n2"}}, {"data": {"source": "n16", "id": "e3", "weight": 23, "target": "n27"}}, {"data": {"source": "n29", "id": "e4", "weight": 17, "target": "n4"}}, {"data": {"source": "n1", "id": "e5", "weight": 33, "target": "n12"}}, {"data": {"source": "n13", "id": "e6", "weight": 38, "target": "n33"}}, {"data": {"source": "n12", "id": "e7", "weight": 34, "target": "n4"}}, {"data": {"source": "n32", "id": "e8", "weight": 34, "target": "n13"}}, {"data": {"source": "n44", "id": "e9", "weight": 32, "target": "n19"}}, {"data": {"source": "n31", "id": "e10", "weight": 24, "target": "n19"}}, {"data": {"source": "n35", "id": "e11", "weight": 18, "target": "n48"}}, {"data": {"source": "n25", "id": "e12", "weight": 19, "target": "n15"}}, {"data": {"source": "n31", "id": "e13", "weight": 18, "target": "n16"}}, {"data": {"source": "n24", "id": "e14", "weight": 39, "target": "n27"}}, {"data": {"source": "n47", "id": "e15", "weight": 22, "target": "n3"}}, {"data": {"source": "n1", "id": "e16", "weight": 34, "target": "n35"}}, {"data": {"source": "n22", "id": "e17", "weight": 15, "target": "n5"}}, {"data": {"source": "n37", "id": "e18", "weight": 40, "target": "n10"}}, {"data": {"source": "n37", "id": "e19", "weight": 21, "target": "n29"}}]}

Answer 1

（1）是的，如果在init选项中指定布局，它将用于初始放置节点，您不必指定节点位置。我想，ungrabifyWhileSimulating乔木布局选项可以满足您在凉棚期间的交互性要求。

（2）使用SVG渲染器，与旧版本大致相同 - 这并不是很多。我现在正在做很多重构以使核心更快并处理更多元素，而我们正在研究的新画布渲染器将有望让我们处理100,000个元素（或者甚至是1,000,000个元素）。

（3）使用类似qtip的内容，并通过cytoscape.js API（即eles.data()）正常读取属性值。

（4）遗憾的是，由于预发布版本的不断发展，因此很难在维基上维护API，并且您所阅读的内容已经过时了。我正在构建一个更好的解决方案，它很快就会出现。

（5）当图表为空时，它可能是乔木布局中的一个错误。毕竟，你是从一个空图开始的。也许，通过在$.getJSON()回调中初始化cytoscape.js来解决它？

Cytoscape.js强制定向布局和节点放置

1 个答案: