In CytoscapeWeb selected edges and nodes are highlighted by yellow border.
In cytoscape.js we can do so for nodes by using border-width and border-color properties.
Is it possible to do so for edges?
Glows are overly expensive and so are not supported in Cytoscape.js. You can use any of the documented styles to indicate selection state.
Related
I see cytoscape.js has support for an overlay, but could not find any way on how to draw a similar shape, but one which is behind the node body, instead of on top of it.
Overlay:
My use case is basically to have something that does not darken the node body when the node is active. Can we somehow manipulate the z-index of the overlay, so that it is shown below the node?
I have a scatterplot with a brush that is inserted via code based on some behind-the-scenes javascript. I would like to have my points on top of the brush so I can interact with them when needed but I can't seem to make it happen.
zindex is not an option because it only works for ordering "sibling marks"?
Is there some nuanced way to make it happen?
The solution was to add zindex property to the top level marks outside of the encode block.
https://github.com/vega/vega/issues/1341
I have a really huge network. In my webapp, I want to be able to select nodes and edges then I change the style to selected stylesheet. I have succeed with this but the problem is the edges always behind another nodes because it is too crowded. Is it possible to make all selected nodes and edges to be in the foreground? I knwo about z-index but it seems it can not set selected nodes and edges to the foreground.
See the visibility style properties: http://js.cytoscape.org/#style/visibility
From the docs:
z-compound-depth : May be bottom, orphan, auto (default), or top. The first drawn is bottom, the second is orphan, which is the same depth as the root of the compound graph, followed by the default of auto which draws in depth order from root to leaves of the compound graph. The last drawn is top.
z-index-compare: May be auto (default) or manual. The auto setting draws edges under nodes, whereas manual ignores this convention and draws solely based on the z-index value.
z-index : An integer value that affects the relative draw order of elements. In general, an element with a higher z-index will be drawn on top of an element with a lower z-index within the same depth.
So, you need to set at least z-index-compare: manual and z-index if you generally want edges over nodes.
I'm making sequence diagrams for a project I'm developing. Nothing overly complex, just a few lifelines with calls back and forth.
The problem is, the white background box of my message descriptions cover over things like my lifeline boxes and dotted lines when in close quarters. You can see the issue in the image below, though I tried to space them out enough to minimize it, the background box still bleeds over the blue lifeline boxes.
I tried checking out Styles > Formatting when right clicking the message, but transparency doesn't seem to have an effect. If I understand right, the transparency slider I see only applies to the border of the box, and when I click "Background" instead of "Foreground" I see a different view with no transparency sliders, only a list of colours.
How can I make the backgrounds of these messages transparent as well?
You can right click on the blank area of your diagram and select Connectors > Paint Connector Through Label to make the caption become transparent.
You can also find the same option under Window > Project Options > Diagramming > Connector which will take effect to any diagrams you created afterward.
i use cytoscape.js. to draw Node Graphs
if i pan the Graph with Mouse, there is a grey circle on my mouse position.
I have no Idea how to remove this.
Can you help me please?
Thank you :)
Only Overwrite the Core style for remove grey circle:
.selector('core') // just core properties
.css({
'active-bg-size': 0
})
How about centering the arrow on the active background indicator. Right now there is a small padding (arrow slightly decentered) which causes improper click on edges. Thank you !
What you are describing is the active state on the background, indicated by the semitransparent circle around the cursor (or your finger on touch). For reasons of consistency across platforms and providing feedback to the user, this feature is not disableable. What we could do simply is allow the active area to be styled so you could effectively hide it. -M https://github.com/cytoscape/cytoscape.js/issues/337