I am trying to use cytoscape to replace my dot output and make it interactive (move nodes and compounds, expand/collapse compounds, etc.)
When a graph is first loaded, the user should be presented with a default layout though. However, I am struggling to find a layout/config that supports what dot calls rank.
In my graph I have compound nodes that represent components.
Components contain other components and/or states, transitions, variables.
Each component can specify inputs and outputs.
In dot I tried to add some form of flow within the system (rankdir=LR;) by positioning the inputs on the left (rank=source;) and the outputs on the right (rank=sink;).
Other elements have no rank and are hence freely positioned.
I then specified cluster subgraphs containing all recursive components.
Now, here is what I have in dot. I hope it explains what I would like to end up with.
First, I already saw this question, but as far as I understood it's for manual positioning, rather than layouts.
I haven't found a layout that fully supports positioning nodes within the compound.
I looked into using the cytoscape.js-cola layout with the following options:
layout: {
name: 'cola',
flow: { axis: 'y', minSeparation: 40 },
avoidOverlap: true
}
I ended up with this
As you can see, there is some flow, but not as nicely as in dot.
I tried adding some function for the alignment parameter, but as far as I understood I can only specify the absolute coordinates (e.g. return {'x': 0};). This basically allows me to align ALL inputs, rather than all inputs of a compound.
Here is a CodePen of my example to play around with: https://codepen.io/anon/pen/GEaOQQ
In the Javascript you can see the comments of
You could try Klay: https://github.com/cytoscape/cytoscape.js-klay
If any of the existing layouts don't meet your requirements, you can use any algorithm you'd like by writing a layout extension. You could port the exact layout you're using with dot/graphviz, if you like.
Related
Using arcgis for JS 4.24 MapView.
I have a feature layer with features of different importance to the user. The importance is defined in an attribute of the feature. What I want to achieve is, that less important features only show on a certain zoom level.
What I tried so far:
Clustering: is not what I want since it is grouping on occurrences not importance.
Unique Value Renderer: Does not seem to support visibility by zoom level but is otherwise exactly what I would use.
Setting the min-max visibility: This applies to all features and cannot be configured by attribute value.
What did I miss? Any other ways to apply custom styles to feature layers?
I guess a simple solution would be to create as many FeatureLayer instances as importances you have. In each of this instances you set,
definitionExpression to the importance level,
maxScale and minScale to constraint the visibility
This solution would work if the number of importance levels are "reasonable" (let say, less than 10 or so, you will have to test it).
Another solution would be to listen for scale changes in the map view (could be the updating event), and then apply a filter (could be definitionExpression again) with the correspondent importance. With this you do not need to have many instances of the same service.
EDIT
The reason for using updating, is to avoid doing stuff while the view is changing, something like this,
view.watch("updating", function (value) {
if (!value) {
// now is the moment to check view properties
// for example
if (view.scale < MIN_SCALE) {
doSomething();
};
}
});
We have a selection of user charts.
When we use the standard highcharts export facility we have layout and font size issues: half the labels are missing and the font sizes and layout are way out of size.
I have read about altering the font sizes in the export settings but when I do this we loose our custom labels, they get replaced with numbers.
The users want a WYSIWYG export.
Here is a link to a fiddle :
`https://jsfiddle.net/spencerplanton/nd8ko93y/17/`
This has been lifted from a rather complicated dynamic chart application, so apologies for any verbose/redundant code.
In the real application we populate data from AJAX calls and allow the user to swap between data sets as well as allowing the user to see the data as either Pie, Bar or Line chart using our custom buttons. Drilldowns are used as well. I have trimmed the ajax data code and replaced it with static data but left the dynamic chart type swapping code and buttons. Without that there will be no way of testing whether any hint/solution/suggestion works with different chart types and the dynamic content/labels. Producing an over simplified test set of one particular iteration could lead to a solution that only fits that one scenario.
Any help formatting the PDF export labels would be greatly appreciated.
It is because Highcharts does not detect the width of the container.
What I can suggest is to set sourceHeight and sourceWidth to bigger values.
exporting: {
enabled: true,
sourceWidth: 1200,
sourceHeight: 600
},
See the demo, now chart looks much better in the PDF.
API: https://api.highcharts.com/highcharts/exporting.sourceWidth
In cytoscape.js, I've been using the "breadthfirst" layout and configured it to be directed (the tree is directed downwards).
Here is an example: http://jsbin.com/jekago/1
It works great, however I would like the nodes to be closer together, especially vertically, and if possible without limiting the bounding box.
My node labels can be quite long so I would not mind having them spread apart horizontally.
How can I can achieve this with this layout? If I can't, what are you recommending? Thanks
The layout uses the available space and avoids node overlap. Reduce the available space as desired using the boundingBox, and specify fit: true if you want the graph to take up the entire viewport.
You can alternatively use spacingFactor, but this will not allow for as much control as boundingBox.
You'll have to experiment and see what functions best for your data.
You can use as an example spacingFactor=1.5 to have 1.5x space between the elements regarding to the elements dimension.
The fit:true is also a good idea. This is used regarding the div dimensions.
In conjunction to work nice you have to set properly the minZoom maxZoom of the Cy element. And you can set avoidOverlap: true also .
I have two columns that I would like to animate separately with a trigger. As I understand it: Skrollr only allows one instantiation on a page. Does anyone know if it's possible to have multiple instances that can be turned off and on?
I've started a working example here:
The grey column will activate the Skrollr instance when clicking on its "Activate!" button. (The "Destroy!" button will remove its instance.)
I would like to isolate the Skrollr animation to just the grey column, but as you can see in this example, the yellow/orange column is also being activated.
Three ways
Remove/add the data attributes between the destroy/init calls and only add them to the elements you want
Use two constants, defined as a function and toggle them between 0 and 1e6 (or something really large). Now the elements with the large one will effectively not be rendered (given you're using edgeStrategy reset)
Monkey patch the refresh method (without touching the skrollr code itself). Skrollr uses it internally when using init. Now you can patch it to use leftColumn.getElementsByTagName('*') or all elements in the right column when no parameter is passed. This way initializing will only affect elements inside one of the columns.
I'd like to style a select-box with some gradients.
My problem is that somehow there is a shadow added.
You'll see what I mean by opening this fiddle.
The gradient of both classes is the same ...
I do not know why a shadow is added to the select-box and I just can't find a solution.
Can you help me?
Thank you.
The select element is handled by the underlying platform/OS, rather than the browser; as such it's not possible to style them (using Chrome 8/Win XP). If you feel the need to use styled select elements then you'll need to use a regular html element (such as an ol or ul) in combination with JavaScript.
I put together a demo of the ideas involved for another question, which shows how this might be achieved: JS Fiddle demo.
I'm not sure what you mean by the 'shadow', although typically input elements are styled with a :focus pseudo-element rule, to indicate that the element has focus. This can be amended with:
select:focus {
outline: 0 none transparent;
}
Although this does reduce the accessibility of the form for those navigating with keyboards/non-mouse input-devices. Ideally, it's better to define an outline that fits with your site's design.