jimmybow / visdcc

Dash Core Components for Visualization.
MIT License
144 stars 18 forks source link

Does not show title when hover over or click on node #39

Closed fds-arizona closed 2 years ago

fds-arizona commented 2 years ago

For nodes, beside 'id' and 'label', we can pass in 'title'. In VIsJS usually the title shows up as one hovers over the node or clicks on it. However, this does not seem to be the case with visdcc.

In short, how to show other node data as one hovers over a node.

I took the example in the main page and added title data:

app.layout = html.Div([
      visdcc.Network(id = 'net', 
                     options = dict(height= '600px', width= '100%')),
      dcc.Input(id = 'label',
                placeholder = 'Enter a label ...',
                type = 'text',
                value = ''  ),
      html.Br(),html.Br(),
      dcc.RadioItems(id = 'color',
                     options=[{'label': 'Red'  , 'value': '#ff0000'},
                              {'label': 'Green', 'value': '#00ff00'},
                              {'label': 'Blue' , 'value': '#0000ff'} ],
                     value='Red'  )             
])

@app.callback(
    Output('net', 'data'),
    [Input('label', 'value')])
def myfun(x):
    data ={'nodes':[{'id': 1, 'label':    x    , 'color':'#00ffff'},
                    {'id': 2, 'label': 'Node 2', 'title':'I EXPECT TO SEE A TEXT HERE'},
                    {'id': 4, 'label': 'Node 4'},
                    {'id': 5, 'label': 'Node 5'},
                    {'id': 6, 'label': 'Node 6'}                    ],
           'edges':[{'id':'1-3', 'from': 1, 'to': 3},
                    {'id':'1-2', 'from': 1, 'to': 2} ]
           }
    return data

@app.callback(
    Output('net', 'options'),
    [Input('color', 'value')])
def myfun(x):
    return {'nodes':{'color': x}}
jimmybow commented 2 years ago

I update the basic usage example code today , and you can also see advanced usage example code

jimmybow commented 2 years ago

and you need to using CSS : https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css