I want to use an attribute on my nodes, 'opinion' to map color of nodes. Opinions are between -1 and 1 and should be colored between red and blue, or something similar. The values and colors don't matter so much as the actual mapping.
It appears to be colors all nodes in the graph are being colored based on the value of the first node in the graph, rather than mapping for each individual node.
Have tried making my opinions positive integers in case cytoscape didn't get along with my floats and/or negative values, but the same thing still happens.
style
selector: 'node',
style: {
'background-color': 'mapData(opinion, -1, 1, red, blue)',
'label': 'data(id)'
}
object example
{"data":{"id":"0","label":"0","opinion":-0.7262256301578913}},{"data":{"id":"1","label":"1","opinion":0.4885386255035229}},{"data":{"id":"2","label":"2","opinion":0.6359066785321656}},{"data":{"id":"3","label":"3","opinion":0.18255639864554474}}
This is working to make nodes darker based on 'opinion' but that's not awesome for a dark background.. Could make the background white and go from red to black, but I'd rather be able to use divergent colors like red & blue to show the difference between groups represented.
selector: 'node',
style: {
'background-color': 'white',
'background-blacken': function(ele){
return ele.data('opinion')
},
'label': 'data(id)'
}
Related
I have a following image:
I am trying to add border shadow to the rectangle shape. Is that possible in cytoscape? Also, the parent elements are Customers and order. Can I decrease the size of customers and order parent element?
Here's is the link to the code and the working example:
https://stackblitz.com/edit/angular-kpnys1?file=src%2Fapp%2Fdemo_test.json
Decreasing the parent size:
This is a styling issue, cytoscape.js applies padding to parent elements, if you want your parent element to be as small as possible, you'll have to adjust the padding in the :parent style:
{
selector: ":parent",
css: {
...
"padding": "0px" \\ remove padding completely, parent almost touching inner nodes
}
},
Border shadow
This was a little tricky, cytoscape.js only provides a normal border (like "border": "1px solid black"). You can use these styles:
border-width : The size of the node’s border.
border-style : The style of the node’s border; may be solid, dotted, dashed, or double.
border-color : The colour of the node’s border.
border-opacity : The opacity of the node’s border.
None of this provides us with the ability to apply a one sided border. As an alternative, I used the ghost styles:
ghost : Whether to use the ghost effect; may be yes or no.
ghost-offset-x : The horizontal offset used to position the ghost effect.
ghost-offset-y : The vertical offset used to position the ghost effect.
ghost-opacity : The opacity of the ghost effect.
If you adjust it a little bit, you can use the x offset and a nice opacity value to achieve this box shadow:
ghost: "yes",
"ghost-opacity": 0.5,
"ghost-offset-x": 1
Here is a working stackblitz with both changes applied.
So I'm aware you can use a function to compute a css property in Cytoscape.js e.g.
cytoscape.stylesheet()
.selector('node')
.css({
'width': function(ele) {
return 12;
})
I'm also aware of the special value 'label' that can be the value of the property e.g.
cytoscape.stylesheet()
.selector('node')
.css({
'width': 'label'
})
What I'm wondering is is there any particular property I could use to scale the label by some factor, e.g. what I want is something like
cytoscape.stylesheet()
.selector('node')
.css({
'width': function(ele) {
return labelWidth * 1.5; //Where to get labelWidth from
})
Specially I want the ability to be able to calculate the height and width of an ellipse so that the label is completely contained within the ellipse (which can be computed using some math e.g. Ellipse bounding a rectangle).
But I haven't been able to find a way to get the labelWidth. I did manage to do it using rscratch but only if the node actually got rendered twice (e.g. multiple .selectors), any proper way to get the label width and height from a given element (or at least a way to calculate how it'll be rendered?).
If you want to do more sophisticated sizing, your calculations are going to have to be more sophisticated.
Options :
(1) Calculate the dimensions of the text yourself using a div.
(2) Use the auto sizing, and then adjust the size based on the current size.
(1) is cleaner than (2).
It doesn't make sense for Cytoscape.js to expose rendered calculated values for you in the stylesheet. Those values are calculated from the stylesheet, creating a dependency cycle.
If you just want the label inside your node, you could just set the padding attribute to make more space around the text.
I'm building a dynamic graph with cytoscape.js over a world map generated with jVectorMap.
Starting with coordinates in LAT / LON format from json data, I can convert them in point.x / point.y over the generated map with:
var nodePoint = theMap.latLngToPoint(node.data.lat, node.data.lon)
and then I can add the new node in the graph with:
cy.add({
group: "nodes",
position: { x: nodePoint.x, y: nodePoint.y },
style: {
'background-color': node.color
},
data: {
id: node.id,
name: node.label,
customData: node.data,
}
})
This part works, but when json returns multiple nodes with the same coordinates, I would like to spread these nodes around the point with the common LAT / LON information.
I'm able to identify these nodes and apply a dedicated layout to them, but the resulting layount is located in the center of the screen / div of graph.
What I want to know is if there is a simple way to apply a Circle Layout with specific center point.
(I would like to avoid implementing the solution that I'm evaluating... i.e to build a bounding box around the center point and see what happens, (with the bounding box size that grows along with node number in the same point))
In the Wine and cheese example included in the documentation they use the bounding box to force a concentric layout around a selected node ( http://js.cytoscape.org/demos/cde4db55e581d10405f5/ ).
While you indicate you would like to avoid this solution it seems a straightforward solution. The implementation in the example is rather elegant.
Created a graph using cytoscape.js. Need to add image as a label on edge.
After examination of
CanvasRenderer.drawElements in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-redraw.js#L406-L412
CanvasRenderer.drawEdgeText in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-label-text.js#L6-L31
CanvasRenderer.drawEdge in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-edges.js
it seems that image label on edge is not supported right now.
One candidate where this feature might be added seems to be the CanvasRenderer.drawEdgeText function. The implementation might examine the text contained in the edge's content and if it looks like reference to an image (e.g. url) then draw it as image...
https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/README.md
Contributing to Cytoscape.js
Cytoscape.js is an open source project, and anyone interested is encouraged to contribute to Cytoscape.js. We gladly accept pull requests. If you are interested in regular contributions to Cytoscape.js, then we can arrange granting you permission to the repository by contacting us.
If your pull request is a bugfix, please make changes to the master branch. Otherwise, please make changes to the next version's branch (i.e. unstable).
I know this is a late answer. but this will help somebody who looks for an answer as like me.
We can use icon fonts or fontawesome for this.
set the edges data as
edges = {
data:
id: "3f5cb5c4-43aa-4f4d-b816-fb4f279585c7"
label: "1 A \uf023 \uf022" //this is the fontawesome unicode chars for lock and notes icons
source: "1"
sourceName: "shipping"
target: "4"
targetName: "twilio.com"
value: 2
}
next in your cytoscape style, mention the font as fontawesome
{
selector: '.autorotate',
style: {
'edge-text-rotation': 'autorotate',
'font-size': '8px',
// 'color': '#000000',
'color': '#333333',
'font-family': 'FontAwesome, helvetica neue Cantarell',
'text-margin-x':'5px',
'text-margin-y':'5px',
// 'source-text-margin-x':'5px',
// 'source-text-margin-y':'5px'
}
}
Now your cytoscape graph will show edges with images as like this
I'm using Cytoscape to generate a simple flow/state diagram and I'm able to generate the graph, but as the graph grows, it just keeps zooming out so the nodes become really small. Is there a way to have Cytoscape to just keep growing in height instead of shrinking the graph and having to zoom in? I would rather have the nodes stay a known size (i.e. 100px X 100px) and as the graph grows and have it grow vertically so the user just has to scroll down the page to see the rest of the graph. Right now, the viewport is restricted to the height of the page when the page is first rendered. Let me know if there is a way to achieve a vertically scrolling graph with fixed size nodes. Thanks!
Based on the suggestions of maxkfranz and gcpdev, I came up with the following solution that seems to work pretty well.
Cytoscope Init:
cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
.css({
'shape': 'roundrectangle',
'height': 80,
'width': 150,
'background-fit': 'cover',
'background-color': '#F5F5F5',
'border-color': '#F5F5F5',
'border-width': 3,
'border-opacity': 0.5,
'text-valign': 'center',
'content': 'data(name)',
})
.selector('edge')
.css({
'width': 6,
'target-arrow-shape': 'triangle',
'line-color': '#0088cc',
'target-arrow-color': '#0088cc'
}),
elements: data,
zoomingEnabled: false,
layout: {
name: 'breadthfirst',
directed: true,
padding: 10
}
}); // cy init
After we have initialized the diagram, we have to set the size of our container div to be at least as high as the bounds of the graph. We also need to reset the size anytime someone resizes the window.
cy.on('ready', function () {
updateBounds();
});
//if they resize the window, resize the diagram
$(window).resize(function () {
updateBounds();
});
var updateBounds = function () {
var bounds = cy.elements().boundingBox();
$('#cyContainer').css('height', bounds.h + 300);
cy.center();
cy.resize();
//fix the Edgehandles
$('#cy').cytoscapeEdgehandles('resize');
};
I am also calling updateBounds() any time the user add a node to the graph. This gives me a graph that is full size and grows vertically. I can scroll down the page just fine as well!
(1) Layouts usually fit to the graph. Set layoutOptions.fit: false to override this default behaviour (at least for included layouts).
(2) The use of (1) means that running the layout will leave the graph viewport in the reset state (i.e. default zoom of 1 at origin position { x: 0, y: 0 }). If you want the viewport maintained at zoom: 1 but with an altered pan position, you can use cy.pan() with some simple calculations with cy.elements().boundingBox(). You may also find cy.center() useful -- though perhaps only horizontally in your case.
(3) The use of (2) means that your graph viewport (i.e. canvas) will be the same size, but the user will be able to pan down to see the remainder of the graph. If you prefer scrolling over panning, you will need to implement your own mechanism for this. You can make clever combination of cy.elements().boundingBox() and jQuery('#cy-div').css(), for example, to adjust the cy div to the size of the graph. You may want to turn off user panning and zooming (and autolock nodes etc.), if the graph is not interactive.
Well, I think you could set the zoom amount to fixed and disable zoom in/out, and use some strategy to dynamically change your div/page's height.
This answer or this one should help you.