如何使用 Dash Cytoscape cola.js 但在 Python 中为每个边缘指定 edgeLength

Question

我正在尝试使用 Dash Cytoscape 创建一个物理直接网络图。 我尝试过使用 Cose、Cose-Bilkent 和现在的可乐，但我的问题是我无法让边缘长度清楚地与重量成正比。

在 Cola 的 JS 中，您可以在“edgeLength”的布局参数中设置为 function 例如 function(e){ return params.edgeLengthVal / e.data('weight'); }，但在 Python 中我无法找到替代方案。 传递定义的 function 不起作用，将 dict 传递给 layout 或为数据 dict 中的每个元素指定 EdgeLength 也不起作用。

如果我能实现这样的目标，但在 Python 中，那将是理想的。 我想在 Python 中执行此操作，因为这是一系列 Dash 图之一，它们是完全内置于 Python 中的更大项目的一部分，而且我不熟悉 JS。

import json

import dash
import dash_html_components as html

import dash_cytoscape as cyto
cyto.load_extra_layouts()
app = dash.Dash(__name__)
server = app.server

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

# Load Data
with open('data.json', 'r') as f:
    elements = json.loads(f.read())

nodes = [{"data":{"id":"1",'name':'1','score':1},"group": "nodes"},
         {"data":{"id":"2",'name':'2','score':0.1},"group": "nodes"},
         {"data":{"id":"3",'name':'3','score':0.1},"group": "nodes"},
         {"data":{"id":"4",'name':'4','score':0.1},"group": "nodes"}]

edges = [
    {"data":{"id":"1-2","source":"1","target":"2","weight":1},"group": "edges"},
    {"data":{"id":"1-3","source":"1","target":"3","weight":0.1},"group": "edges"},
    {"data":{"id":"1-4","source":"1","target":"4","weight":0.1},"group": "edges"},
    {"data":{"id":"2-3","source":"2","target":"3","weight":0.1},"group": "edges"},
    {"data":{"id":"2-4","source":"2","target":"4","weight":0.1},"group": "edges"},
    {"data":{"id":"3-4","source":"3","target":"4","weight":0.1,"edgeLength":20000},"group": "edges"}
]
elements = nodes + edges
print(elements)


with open('cy-style_2.json', 'r') as f:
    stylesheet = json.loads(f.read())

def length(edge):
    distance = 100/edge['data']['weight']
    return distance

# App
app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape',
        elements=elements,
        stylesheet=stylesheet,
        style={
            'width': '100%',
            'height': '100%',
            'position': 'absolute',
            'left': 0,
            'top': 0,
            'z-index': 999

        },
        layout={
            'name': 'cola',
            'EdgeLength': length,
            'maxSimulationTime': 8000,
            'convergenceThreshold': 0.001,
            'nodeOverlap': 20,
            'refresh': 20,
            'fit': True,
            'padding': 30,
            'randomize': True,
            'componentSpacing': 100,
            'nodeRepulsion': 400000,
            'edgeElasticity': 100000,
            'nestingFactor': 5,
            'gravity': 80,
            'numIter': 1000,
            'initialTemp': 200,
            'coolingFactor': 0.95,
            'minTemp': 1.0
        }
    )
])
print(app.layout)
if __name__ == '__main__':
    app.run_server(debug=True)

Answer 1

也许这会有所帮助： https://github.com/cytoscape/ipycytoscape/issues/82

否则，这将在单击节点时解决您的问题（但不拖动它）

nodes = [
     {"data":{"id":"1",'name':'1','score':1,'href':'www.mywebsite.com'},"group": "nodes"},
     {"data":{"id":"2",'name':'2','score':0.1,'href':'www.mywebsite.com'},"group": "nodes"},
     {"data":{"id":"3",'name':'3','score':0.1,'href':'www.mywebsite.com'},"group": "nodes"},
     {"data":{"id":"4",'name':'4','score':0.1,'href':'www.mywebsite.com'},"group": "nodes"}
]

然后添加一个回调

@app.callback(Output('cytoscape', 'layout'),
          [Input('cytoscape', 'tapNode')],
          [State('cytoscape', 'layout')])
def open_link_at_node_click(data, layout):
    """
        Open (default) web-browser
    """
    import sys
    import subprocess
    import webbrowser
    # Mac
    if sys.platform == 'darwin':
        subprocess.Popen(['open', data['data']['href']])
    # Linux & Windows
    else:
        webbrowser.open_new_tab(data['data']['href'])
    return {'name': layout}

即使不是目的，这里也会强制刷新布局。 但是，它可以解决问题。 一种方法是找到更好的“输出”，例如隐藏的 div。