Question

我正在尝试使用节点标签在列布局中执行扩展（多行）节点描述。我希望文本在矩形节点的正下方。类似的东西：

  [ Node ]
  lines of my
  centred
  label

所以我试过了：

.css({'text-valign':'bottom',
      'text-halign':'centre', 
      'text-max-width':nodeWidth})

将文本放在正确的位置，但它也使文本本身居中对齐。

  [ Node ]
lines of my
  centred
   label

任何其他'text-halign'都会根据需要布置文本，但也值会将文本放在一个角落。是否可以更改此选项以使标签文本与节点水平对齐，但是如同普通文本段落一样在行内左对齐？标准的CSS'text-align'属性似乎不起作用。

感谢您的帮助

Answer 1

只有已记录的样式属性可用。如果您正在寻找当前不可用的功能，请提交Github问题：https://github.com/cytoscape/cytoscape.js/issues/new

目前，如果左侧的对齐对您的应用非常重要，则可以将文本与节点的中间右侧对齐。

Answer 2

对于任何将来的观看者，如果他们希望如何将其Cytoscape节点的文本内容对齐到居中位置，则可以通过Dash / Plotly使用Cytoscape。直到最近才起作用：

import dash
import dash_cytoscape as cyto
import dash_html_components as html

app = dash.Dash(__name__)

server = app.server

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-two-nodes',
        layout={'name': 'preset'},
        style={'width': '100%', 'height': '400px'},
        elements=[
            {'data': {'id': 'one', 'label': 'Node 1', 'classes': 'node'}, 'position': {'x': 75, 'y': 75}},
            {'data': {'id': 'two', 'label': 'Node 2', 'classes': 'node'}, 'position': {'x': 200, 'y': 200}},
            {'data': {'source': 'one', 'target': 'two'}}
        ],
        stylesheet=[
        # Group selectors
        {
            'selector': 'node',
            'style': {
                'text-valign':'center',
                'text-halign':'center', 
                'content': 'data(label)'
            }
        }] 
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

cytoscape.js中的标签对齐

2 个答案: