使用 Dash-Cytoscape 更改单个节点的大小

Question

我已经使用 Dash-Cytoscape 两天了，我尝试了很多方法来单独更改节点大小。我试过了，但没有用：import dashimport dash_cytoscape as cytoimport dash_html_components as htmlapp = dash.Dash(__name__)app.layout = html.Div([    cyto.Cytoscape(        id="cytospace",        elements=[            {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 50, 'y': 50}, 'size':20},            {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}, 'size':70},            {'data': {'source': 'one', 'target': 'two','label': 'Node 1 to 2'}}        ],        layout={'name':'preset'},        style={'height': '95vh',               'width': '100%'}    )])if __name__ == "__main__":    app.run_server(debug=True)

Answer 1

这是一个更详细和通用的版本。您可以通过 css 样式更改单个节点的大小。您可以编辑单个节点的宽度和高度属性。如果您已经在元素数据中存储了大小，请使用mappers将存储的数据映射到节点大小。这是我在 Cytoscape.js 文档中找到的内容。

mapData()指定到元素数据字段的线性映射。例如，mapData(weight, 0, 100, blue, red)将元素的权重映射到蓝色和红色之间的颜色，权重在 0 到 100 之间。例如，将带有的元素ele.data("weight") === 0映射到蓝色。值超出指定范围的元素将映射到极值。在前面的示例中，带有 的元素ele.data("weight") === -1将被映射到蓝色。

import dash

import dash_cytoscape as cyto

import dash_html_components as html

app = dash.Dash(__name__)

default_stylesheet = [

    {

        "selector": "node",

        "style": {

            "width": "mapData(size, 0, 100, 20, 60)",

            "height": "mapData(size, 0, 100, 20, 60)",

            "content": "data(label)",

            "font-size": "12px",

            "text-valign": "center",

            "text-halign": "center",

        }

    }

]

app.layout = html.Div([

    cyto.Cytoscape(

        id="cytospace",

        elements=[

            {'data': {'id': 'one', 'label': 'Node 1', 'size': 10}, 'position': {'x': 50, 'y': 50}},

            {'data': {'id': 'two', 'label': 'Node 2', 'size': 120}, 'position': {'x': 200, 'y': 200}},

            {'data': {'source': 'one', 'target': 'two','label': 'Node 1 to 2'}}

        ],

        layout={'name':'preset'},

        stylesheet=default_stylesheet

    )

])

if __name__ == "__main__":

    app.run_server(debug=True)

Answer 2

对我来说，以下代码允许调整节点大小：

import dash

import dash_cytoscape as cyto

import dash_html_components as html

app = dash.Dash(__name__)

default_stylesheet = [

    {

        'selector': 'node',

        'style': {

            'background-color': '#BFD7B5',

            'label': 'data(label)',

            'width': "30%",

            'height': "50%"

        }

    }

]

app.layout = html.Div([

    cyto.Cytoscape(

        id="cytospace",

        elements=[

            {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 50, 'y': 50}, 'size':20},

            {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}, 'size':70},

            {'data': {'source': 'one', 'target': 'two','label': 'Node 1 to 2'}}

        ],

        layout={'name':'preset'},

        stylesheet=default_stylesheet

    )

])

if __name__ == "__main__":

    app.run_server(debug=True)