In cytoscape I'd like to create nodes that are circular, with the diameter depending on the node label (the label is centered in the node). I've set the following:
style: {
'shape': 'ellipse',
'width': 'label'
}
How do I get the height to depend on the width value? Setting 'height': 'label' sets the height to the height of the label.
If you can use a fixed-width font, then #BeerBaron's answer is best.
Alternatively, use the stylesheet you have in the OP:
style: {
'shape': 'ellipse',
'width': 'label',
'height': 'data(height)'
}
Update node heights as a step post-init, e.g.
cy.nodes().forEach(function( n ){ n.data('height', n.width()); });
You should probably preset data.height for each node to some default value at init to ease debugging (e.g. when you add new nodes later).
Depending on label lenght and font, you can set width and height in the javascript part that is appending nodes to the graph, and leave the rest of the style to the initialization of the engine.
For example:
cy.add({
group: 'nodes',
style: {
height: (10*label.lenght),
width: (10*label.lenght),
}
})
Related
I'm using cytoscape.js 3.19.1 and I cannot figure out how to combine multiple edges into one, and have the weight increased of that one edge.
Current view
I am now looking for a solution where 2 edges get combined into one with a width of 2, 3 edges combined into one with a width of 3, etc.
I am changing the color of the nodes with this code:
style: [
{
selector: 'node',
css: {
'content': 'data(name)',
'text-outline-color': 'red',
},
style: {
'background-color': 'data(color)',
'label': 'data(name)',
'color': "white",
}
},
{
selector: 'edge',
css: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
}
],
and this cytoscape input works: {'nodes': [{'data': {'id': '1464848862', 'name': 'my_name', 'color': '#FFA00F'}}....
I could now do the same for the line width but I would rather not having to go through the data 'manually' to figure out which 2 nodes get connected, how often that happens, define how thick that lines has to be and then remove all the duplicates that no longer need to be drawn.
Is there any other way?
Many thanks for any suggestions!
Actually, you might achieve this using some different styles on the edges. "haystack" or "straight" might be useful. Check them https://js.cytoscape.org/demos/edge-types/
Or you might use https://github.com/iVis-at-Bilkent/cytoscape.js-expand-collapse
Check its demo and collapse the edges.
I'm using the Cose-Bilkent layout to display a nested graph but it gets a bit messy when there are too many edges. To improve the graph in a visual way I was thinking about using some edge bundling for the graph. I've been doing some research and it seems I should be able to do this by setting things like control-point-step-size and/or control-point-weight but it is still not clear to me how to do that to be honest. My idea is to set that control point based on the position of some parent node. Below I attach a screenshot with a sketch of what I would like to get (sorry for the bad sketch). Could someone guide me a bit on how to get that parent control point and then set if for the edges? enter image description here Thanks!
I think you just have to add the control-point properties to your style :)
You can either use the bezier edge-style or the unbundled bezier edge-style
var cy = cytoscape({
container: yourContainer, // container to render in
elements: yourElements,
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': yourColor,
'label': yourLabel
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
'curve-style': 'bezier',
// 'curve-style': 'unbundled-bezier', // this is a manual bezier, maybe try out this one too
'control-point-things': xyz
}
}
],
layout: {
name: yourLayout
}
});
I am trying to make mapbox layer to change the color of circles
when I change the value a property. But the color of the circle didn`t change.
I use mapbox-gl-draw
Here the jsbin : https://jsbin.com/lojuwak/edit?html,output
Here the style of the layer with the expressions in circle-color to change color according to the value of
{
'id': 'gl-draw-point-inactive',
'type': 'circle',
'filter': ['all',
['==', 'active', 'false'],
['==', '$type', 'Point'],
['==', 'meta', 'feature'],
['!=', 'mode', 'static']
],
'paint': {
'circle-radius': 12,
'circle-blur': 0.5,
'circle-color': ["case",
['!',['has', 'isProcessed']], '#FF0000',
'#214AED'
]
}
My data are geojson that had a property 'isProcessed' defined of not.
This part is working fine when I initially load the geojson.
The problem raised when I change add prroperty to the selected feature
I add the property 'isProcessed' of the feature by doing :
selectedFeature = this.draw.getSelected();
selectedFeature.features[0].properties.isProcessed = true;
this.draw.add(selectedFeature);
But the color of the updated feature do not change.
Whan step did I miss ?
Thanks
If opts.userProperties is set to true the properties of a feature will also be available for styling. All user properties are prefixed with user_ to make sure they do not clash with the Draw properties.
[ https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#styling-draw ]
So you need to add a user_ prefix to the property in styles:
'paint': {
'circle-radius': 12,
'circle-blur': 0.5,
'circle-color': ["case",
['!',['has', 'user_isProcessed']], '#FF0000',
'#214AED'
]
}
[ https://jsfiddle.net/c9kdf51t/ ]
I'm using Dojo 1.9 to start learning, and I'm having trouble disabling the resize of the Simple Textarea. I don't really have a particular need to do this, I was just curious about how to and have since been unable.
There is no property listed in the Dijit API, and changing the CSS either with .set("style"), including it inline in the original container (I'm doing it programmatically), or even trying to set resize to none in the original declaration ie:
var textarea = new SimpleTextarea({
rows: 5,
cols: 10,
onFocus: function(){ console.log("textarea focus handler"); },
onBlur: function(){ console.log("textarea blur handler"); },
selectOnClick: true,
style: "resize=none",
value: "This is a sample SimpleTextarea."
}, "textarea");
Any ideas?
If you set style equal to an object with a key value pair of resize : "none" that will do the trick
var textarea = new SimpleTextarea({
style: {resize : "none"}
}, "textarea");
You can do like this:
<input dojotype="dijit.form.SimpleTextarea"
id="yourTxtWidget"
style="resize:none; width: 230px; height: 75px;"
class="myTextField"/>
I use flotr2, I wrote a test here.
http://jsfiddle.net/yKqXM/
If I want to show label on each bar stack, should I use "marker" type? and how do I use it.
I am new to flotr2, could you give me an good study article or docs, so I can study it.
Sorry if this question is stupid, but I am frustrated of looking for the example.
Matt
Yup, you can use the 'markers' attribute. You can actually just place this fragment after the bars type (you can use both at once):
markers: {
show: true,
position: 'ct',
},
However, there is a small problem with this. Flotr2 doesn't respect the stacked positions for markers, so the marker labels will end up in the wrong position.
To get around this, create some dummy data sets which are the summation of the stacks, and move the 'bars' and 'markers' to be directly specified on the separate data sources. The bit after the data is listed is just the "default" mode for each data source.
There are many quite useful opts for markers. See the library source.
Flotr.addType('markers', {
options: {
show: false, // => setting to true will show markers, false will hide
lineWidth: 1, // => line width of the rectangle around the marker
color: '#000000', // => text color
fill: false, // => fill or not the marekers' rectangles
fillColor: "#FFFFFF", // => fill color
fillOpacity: 0.4, // => fill opacity
stroke: false, // => draw the rectangle around the markers
position: 'ct', // => the markers position (vertical align: b, m, t, horizontal align: l, c, r)
verticalMargin: 0, // => the margin between the point and the text.
labelFormatter: Flotr.defaultMarkerFormatter,
fontSize: Flotr.defaultOptions.fontSize,
stacked: false, // => true if markers should be stacked
stackingType: 'b', // => define staching behavior, (b- bars like, a - area like) (see Issue 125 for details)
horizontal: false // => true if markers should be horizontal (For now only in a case on horizontal stacked bars, stacks should be calculated horizontaly)
}