CODEWITHSUNDEEP
pythonplotlyplotly-dashcytoscape
Juan Carlos Jchr
Juan Carlos Jchr

Reputation: 119

Change individual node size using Dash-Cytoscape

I've been using Dash-Cytoscape for two days now and I tried a lot of things to change the node size individually. I tried this but it didn't work: 

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)

Upvotes: 2

Views: 5332

Answers (2)

MaxSha
MaxSha

Reputation: 129

Here is a more detailed and general version. You can change individual node size via css styling. You can edit the width and height attribute for an individual node. If you have already stored size in elements data, map stored data to node size using mappers. Here is what I find on Cytoscape.js documentation.

mapData() specifies a linear mapping to an element’s data field. For example, mapData(weight, 0, 100, blue, red) maps an element’s weight to colours between blue and red for weights between 0 and 100. An element with ele.data("weight") === 0 would be mapped to blue, for instance. Elements whose values fall outside of the specified range are mapped to the extremity values. In the previous example, an element with ele.data("weight") === -1 would be mapped to blue.

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)

Upvotes: 7

Max
Max

Reputation: 54

For me the following code allows to adjust the node size: 

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)

Upvotes: 3

Related Questions