使用 Dash-Cytoscape 更改單個節點的大小

Question

我已經使用 Dash-Cytoscape 兩天了，我嘗試了很多方法來單獨更改節點大小。 我試過了，但沒有用：

import dash
import dash_cytoscape as cyto
import dash_html_components as html

app = 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 樣式更改單個節點的大小。 您可以編輯單個節點的寬度和高度屬性。 如果您已經在元素數據中存儲了大小，則 map 使用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)