Giter Site home page Giter Site logo

Comments (4)

plbremer avatar plbremer commented on May 16, 2024 1

@ppakorn (months later lol) and anyone else
from this thread
https://stackoverflow.com/questions/56706002/how-can-i-make-the-label-of-an-edge-displayed-just-in-the-middle-position

you can make something like

        cyto.Cytoscape(
            id='cyto_sample',
            elements=[],
            stylesheet=[
                {
                    'selector':'edge[label',
                    'style':{
                        'label':'data(label)',
                    }
                },
        ),

from dash-cytoscape.

daddycocoaman avatar daddycocoaman commented on May 16, 2024

@realboa Do you mean something like this?
image

If so, this is in the Cytoscape.js documentation. In the Cytoscape.js documentation for labels. You just set label to a value like data(name) to show edge labels names.

But if you mean to show actual data when you hover over it, you could probably use the mouseoverEdgeData reference for a callback so that a tool tip or something displays when you hover over it. Cytoscape Component Reference

from dash-cytoscape.

xhluca avatar xhluca commented on May 16, 2024

Hi @realboa, did @daddycocoaman 's suggestion work for you?

from dash-cytoscape.

ppakorn avatar ppakorn commented on May 16, 2024

I cannot display the edge label too.
Also, I couldn't see the edge label in the first example of this guide.

import dash
import dash_cytoscape as cyto
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-elements-basic',
        layout={'name': 'preset'},
        style={'width': '100%', 'height': '400px'},
        elements=[
            # The nodes elements
            {'data': {'id': 'one', 'label': 'Node 1'},
             'position': {'x': 50, 'y': 50}},
            {'data': {'id': 'two', 'label': 'Node 2'},
             'position': {'x': 200, 'y': 200}},

            # The edge elements
            {'data': {'source': 'one', 'target': 'two', 'label': 'Node 1 to 2'}}
        ]
    )
])

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

from dash-cytoscape.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.