cytoscape.js 设置绘图的边长时如何将参数传递给 cola.js？

Question

我是 cytoscape.js 的新手，我遇到了一个关于通过 cytoscape.js 设置策略边长的问题。我知道扩展 cola.js 可以帮助 it.But 我不知道如何将参数传递给 cola.js 设置选项。我的代码是这样的。

data.json:

{
    "nodes" : [
            {
            "data": {"id": "a", "label": "TF", "size": "50px","tf":"bZIP"}
            },
            {
            "data": {"id": "b", "label": "Gene2", "size":"5.447301098px", "tf":"bZIP"}
            },
            {
            "data": {"id": "c", "label": "Gene3","size":"9.296750572px", "tf":"WRKY"}
            },
            {
            "data": {"id": "d", "label": "Gene4","size": "1.173561939px", "tf":"MYB"}
            },
            {
            "data": {"id": "e", "label": "Gene5", "size": "4.84237031px", "tf":"NAC"}
            },
            {
            "data": {"id": "f", "label": "Gene6", "size": "1.492418527px","tf":"NA"}
            }
    ],
            "edges" : [
            {
            "data": {
                "id": "ab",
                "source": "a",
                "target": "b",
                "range":"3.4px"

            }
            },
            {
            "data": {
            "id": "ac",
                    "source": "a",
                    "target": "c",
                    "range":"38.6px"
            }
            },
            {
            "data": {
            "id": "ad",
                    "source": "a",
                    "target": "d",
                    "range":"20.6px"
            }
            },
            {
            "data": {
            "id": "ae",
                    "source": "a",
                    "target": "e",
                    "range":"14.9px"
            }
            },
            {
            "data": {
             "id": "af",
                    "source": "a",
                    "target": "f",
                    "range": "47.8px"
                }
                }]    
    }

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my</title>
    <!-- <script src="src/cytoscape.min.js"></script> -->
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

    <script src="../depend/jquery3.4/jquery.min.js"></script>
    <!-- <script src="src/cola.min.js"></script> -->
   <script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script>
    <script src="src/cytoscape-cola.js"></script>
</head>
<style>
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>
<body>
    <div id="cy"></div>
    <script>
        $.ajax({
            type:"get",
            url:"data.json",
            dataType:"json",
            success:function(jsondata){
                var cy = cytoscape({
                container: document.getElementById('cy'),
                elements: jsondata,
                style: [
                    {
                        selector: 'node',
                        style: {
                            'label': 'data(label)',
                            'width': 'data(size)',
                            // 'height': 'data(size)',
                            'background-color': '#99CCFF',
                            "border-width": "2px",
                            "border-opacity": "0.5",
                            "border-color": "#CCCCCC",
                            "text-valign": "center",
                            "text-halign": "center",
                            "text-outline-color": "#CCCCCC",
                            "text-outline-width": "1px",
                        }
                    }, {
                        selector: 'edge',
                        style: {
                           'width': 3,
                            'line-color': '#ccc',
                            'color': '#ccc',
                            'target-arrow-color': '#ccc',
                            'target-arrow-shape': 'triangle'
                        }
                    },
                    {
                      selector: 'node[tf="NA"]',
                      style: {
                        'width': 3,
                        'shape': 'rectangle',
                        'background-color': '#000',
                        'line-color': '#009999',
                        'target-arrow-color': '#ccc',
                        'target-arrow-shape': 'triangle'
                      }
                    }
                ],
                layout: {
                    name: 'cola',
                    //edgeLength: function(edge){return edge.data('range')} !!!!! I don't know how to pass parameter
                }
            });
            }

        });

    </script>
</body>
</html>

如您所见，我想将 edges.data.range 传递给 edgeLength。但是我没有成功。希望有人能帮助我。提前致谢！

Answer 1

edgeLength 函数需要一个数字或 returns 某种数字的函数。传递 10.4px 之类的东西是行不通的，布局无法读取像素值（或更确切地说是字符串）。只需使用这样的功能：

{
  "nodes": [{
      "data": {
        "id": "a",
        "label": "TF",
        "size": 50,
        "tf": "bZIP"
      }
    },
    {
      "data": {
        "id": "b",
        "label": "Gene2",
        "size": 5.45,
        "tf": "bZIP"
      }
    },
    {
      "data": {
        "id": "c",
        "label": "Gene3",
        "size": 9.3,
        "tf": "WRKY"
      }
    },
    {
      "data": {
        "id": "d",
        "label": "Gene4",
        "size": 1.17,
        "tf": "MYB"
      }
    },
    {
      "data": {
        "id": "e",
        "label": "Gene5",
        "size": 4.84,
        "tf": "NAC"
      }
    },
    {
      "data": {
        "id": "f",
        "label": "Gene6",
        "size": 1.49,
        "tf": "NA"
      }
    }
  ],
  "edges": [{
      "data": {
        "id": "ab",
        "source": "a",
        "target": "b",
        "range": 3.4

      }
    },
    {
      "data": {
        "id": "ac",
        "source": "a",
        "target": "c",
        "range": 38.6
      }
    },
    {
      "data": {
        "id": "ad",
        "source": "a",
        "target": "d",
        "range": 20.6
      }
    },
    {
      "data": {
        "id": "ae",
        "source": "a",
        "target": "e",
        "range": 14.9
      }
    },
    {
      "data": {
        "id": "af",
        "source": "a",
        "target": "f",
        "range": 47.8
      }
    }
  ]
}

...

edgeLength: function (edge) {
    return edge.data('range');
}

cytoscape.js 设置绘图的边长时如何将参数传递给 cola.js？

How to pass parameter to cola.js when setting edge length of plot by cytoscape.js?

cytoscape.js

cytoscape-web