使用 Dash-Cytoscape 更改单个节点大小
Change individual node size using Dash-Cytoscape
我已经使用 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)
对我来说,以下代码允许调整节点大小:
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)
这是一个更详细和通用的版本。您可以通过 css 样式更改单个节点大小。您可以编辑单个节点的宽度和高度属性。如果您已经将大小存储在元素数据中,请使用 mappers 将存储的数据映射到节点大小。这是我在 Cytoscape.js 文档中找到的内容。
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)
我已经使用 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)
对我来说,以下代码允许调整节点大小:
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)
这是一个更详细和通用的版本。您可以通过 css 样式更改单个节点大小。您可以编辑单个节点的宽度和高度属性。如果您已经将大小存储在元素数据中,请使用 mappers 将存储的数据映射到节点大小。这是我在 Cytoscape.js 文档中找到的内容。
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 withele.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 withele.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)