I am using cutoscape.js library for visualizing graphs in web.
i want to add some node and edges between them. adding node is simple.
i want to draw an edge between source node and destination node with drag and drop.
If you can help me, i will appreciate you .
Thanks
Please do your research first, this can be solved by simply going over to the docs and browsing throug the extensions:
The solution is using Edge-Handles
let cy = cytoscape({
container: document.getElementById('#cy'),
/* ... */
});
let defaults = { /* ... */ };
let eh = cy.edgehandles( defaults );
If you need an example, take a look at this.
Related
Following the example on the website: https://vega.github.io/editor/#/examples/vega-lite/interactive_bar_select_highlight
I want to programmatically set the selections via signals. I realize that I could emulate a click by doing the following
VEGA_DEBUG.view.signal("select_tuple", {"unit":"","fields":[{"type":"E","field":"_vgsid_"}],"values":[1]})
However, I cannot proceed to select another, e.g., the shift select of the 2
VEGA_DEBUG.view.signal("select_tuple", {"unit":"","fields":[{"type":"E","field":"_vgsid_"}],"values":[2]})
This makes sense, since only shift-click accumulates the state.
I tried modifying the accumulated signal
VEGA_DEBUG.view.signal("select", {"_vgsid_":[1,2],"vlMulti":{"or":[{"_vgsid_":1},{"_vgsid_":2}]}})
However, this does not help. Is this not possible? I understand that a custom solution may be possible in hand-rolled vega, as opposed to that compiled from vega-lite.
Thanks.
Just need to set VEGA_DEBUG.view.signal("select_toggle", true) before adding the new select!!
After much research I made this example of how to change the vega-lite brush programmatically
https://observablehq.com/#john-guerra/update-vega-lite-brush-programmatically
Using #koaning example this stack overflow question I figured that you can change the brush by updating "brush_y" (assuming that your selection is called brush) or change the selection using "brush_tuple" (which doesn't seem to update the brush mark)
viewof chart = {
const brush = vl.selectInterval("brush").encodings("y");
const base = vl
.markBar()
.select(brush)
.encode(
vl.x().count(),
vl.y().fieldQ("Horsepower"),
vl.color().if(brush, vl.value("steelblue")).value("gray")
)
.height(maxY);
return base.data(data).render();
}
update = {
// From https://codepen.io/keckelt/pen/bGNQPYq?editors=1111
// brush_y -> brush_tuple -> brush
// Updates on pixels
chart.signal("brush_y", [by0, maxY / 2]);
await chart.runAsync();
}
Crossposting here in case it might be useful for anyone
Is there a code sample available that illustrates how to use a 2D transform (such as rotate and scale) with a JPG in a react-native application, perhaps with the code in the tutorial as a starting point?
If possible, it would be helpful to see code for two scenarios:
1) automatically apply a transform when the app is launched
2) apply a transform after different types of user gestures
At some point in the future it would be interesting to see how to create 3D transforms and animation effects.
Update: You can see the entire example in my sample app here: https://github.com/grgur/react-native-memory-game
Animation is now AnimationExperimental so we'll need to modify zvona's solution.
First, make sure RCTAnimationExperimental is a linked library
If not, then follow these steps:
Navigate to node_modules/react-native/Libraries/Animation/
Drag and drop RCTAnimationExperimental.xcodeproj to Libraries (should look like the image above)
Click on your project name (in the example above, my project name is Memory)
Switch to the Build Phases tab
Expand Libraries/RCTAnimationExperimental.xcodeproj/Products
Drag libRctAnimationExperimental.a to Link Binary With Libraries
Ok, the hardest part is now over. Head over to your JavaScript file. Animation is no longer part of the react-native package so we have to include it explicitly.
var React = require('react-native');
var AnimationExperimental = require('AnimationExperimental');
Alright, champ, you're ready to animate. Make sure you know what you're animating. The view you will be animating is referred to as node.
AnimationExperimental.startAnimation({
node: this.refs.image,
duration: 400,
easing: 'easeInQuad',
property: 'opacity',
toValue: 0.1,
});
And that's it!
At the moment of writing, available properties are: opacity, position, positionX, positionY, rotation, scaleXY
Currently, this is a bit more complex process and I'm planning to write a blog post about that. However, as a brief starter, I write something here.
First problem is that RCTAnimation / RCTAnimationManager is not present at all, if you've created your project with react-native init [ProjectName] (https://github.com/facebook/react-native/issues/226).
You need to add it in XCode from a plus sign in top left corner: "Add Files to [ProjectName]". Then you navigate to node_modules > Libraries > Animation > RCTAnimation.xcodeproj. After it's imported, you need to drag it under Libraries in your project.
Then you need to open tab Build Phases. There you have menu Link Binary With Libraries (x items). Drag from Products under RCTAnimation.xcodeproj file named libRCTAnimation.a to the menu.
Now, you can build your project to support animations. I'm not that familiar with XCode, so there could be a even more simple way of achieving this, but I got it sorted like this.
Second Problem is that not all the available (or planned) functionality is there. At least I ran through the jungle of trials and errors before I got anything on the screen.
Try e.g. this code at first to get fully proofed that animations are working:
var {
Animation,
AppRegistry,
StyleSheet,
Text,
View
} = React;
var styles = StyleSheet.create({
test: {
width: 400,
height: 400,
backgroundColor: 'blue',
opacity: 0
}
});
var AnimationTest = React.createClass({
componentDidMount () {
Animation.startAnimation(this.refs['this'], 400, 0, 'linear', {opacity: 1});
},
render () {
return (
<View ref='this' style={styles.test}>
<Text>Just an animation test</Text>
</View>
)
}
});
AppRegistry.registerComponent('AnimationTest', () => AnimationTest);
This should get you going. If you need any further assistance, please notify me.
If I ever succeed in writing a more complete instructions in a form of a blog article, I'll update it to this answer.
Check out the 2048 demo application for example usage of the RCTAnimation library:
https://github.com/facebook/react-native/tree/master/Examples/2048
It doesn't use any especially complex transforms, but does animate position, opacity, and scaleXY of various elements with code that looks like this:
Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});
I'm trying to create functionality very similar to most websites these days.
The concept is 3 sections the size of the browser, the background images are supposed to be fixed positioned and revealed by the div scrolling up and down.
We need this to function as beautifully on mobile as it does on desktop, and it looks like Famous/angular is the solution.
Here is a pen.
http://codepen.io/LAzzam2/pen/XJrwbo
I'm using famous' Scroll.sync, firing javascript that positions the background image on every start / update / end.
scrollObject.sync.on("update", function (event) {
console.log('update');
test(event);
});
here is the function positioning the backgrounds.
function test(data){
var scroller = document.getElementsByClassName('famous-group');
styles = window.getComputedStyle(scroller[0], null);
tr = styles.getPropertyValue("-webkit-transform").replace('matrix(1, 0, 0, 1, 0,','').replace(')','');
var distanceTop = -(parseInt(tr));
var sections = document.getElementsByClassName('section');
sections[3].style.backgroundPosition="50% "+distanceTop+"px";
sections[4].style.backgroundPosition="50% "+(-(window.innerHeight)+distanceTop)+"px";
sections[5].style.backgroundPosition="50% "+(-(window.innerHeight*2)+distanceTop)+"px";
};
Any input / suggestions / advice would be wonderful, really just looking for a proof of concept with these 3 background images scrolling nicely.
That jittery-ness is unfortunate, I can't tell what would be causing the issue, except maybe the order in which events are fired?
**There are known issues, only works in -webkit browsers as of now
I think your idea to use Famous is good, but probably what I would do, would be taking a different approach to the problem.
You are solving this by touching the DOM, that is exactly what both Angular and Famous are meant to avoid.
If I had to face the same goal, I would probably use a Famous surface for the background instead of changing the property of the main one and synchronize its position with the scrolling view.
So, in your code, it would be something like this:
function test(data){
var scrollViewPosition = scrollObject.getAbsolutePosition();
var newBackgroundPosition = // Calculate the new background position
var newForegroundPosition = // Calculate the new foreground position
var backgroundSurface = backgroundSurface.position.set(newBackgroundPosition);
var foregroundSurface = foregroundSurface.position.set(newForegroundPosition);
};
I have a graph with nodes and edges and I want to display them.
Isn't there any function which, given this graph, displays it without me to give exact coordinates?
yes, you can use the auto layout
http://jgraph.github.io/mxgraph/docs/js-api/files/layout/mxCompactTreeLayout-js.html
this url construct a compact tree layout.
var layoutMgr = new mxLayoutManager(graph);
layoutMgr.getLayout = function(cell) {
return layout;
};
I just started using Leaflet and Marker Clusterer to organize the markers.
Problem #1: When an unclustered marker is clicked, no popup appears.
Problem #2: When a cluster is clicked several times, all the markers within that cluster appears, and when one of this marker is clicked, its popup appears! However, after closing the popup by clicking on the map, clicking on any of these clustered markers do not open any popups!
If I only have 3 unclustered markers, the popup works fine. However, as more markers are added, once a cluster forms, clicking on the marker within any cluster will not cause the popup to open!
Initializing markerclusterer
markers = new L.MarkerClusterGroup();
map.addLayer(markers);
All markers added to markercluster markers
A loop calls on the render function to create the marker and add it to the markerclusterer's array markers. (ignore the backbone.js code)
ListingMarkerView = Backbone.View.extend({
template: _.template( $('#tpl_ListingMarkerView').html() ),
render: function() {
// Create marker
var content = this.template( this.model.toJSON() );
var marker = new L.marker(
[this.model.get('lat'), this.model.get('lng')],
{content: content});
marker.bindPopup(content);
// Add to markerclusterer
markers.addLayer(marker);
}
});
Without markerclusterer
If I add the marker directly to map instead of the markerclusterer array markers, the popups work fine, so I guess the problem has something to do with markerclusterer.
Did I do something wrong that resulted in such behavior of the popups? All help appreciated, thanks!
From what little I know of the cluster marker group, you should do this:
var markerGroup = new L.MarkerClusterGroup();
markerGroup.on('click', function(ev) {
// Current marker is ev.layer
// Do stuff
});
To add an event handler to the cluster layer instead, do this:
markerGroup.on('clusterclick', function(ev) {
// Current cluster is ev.layer
// Child markers for this cluster are a.layer.getAllChildMarkers()
// Do stuff
});
Oh, and read the github README carefully, it's all in there...
Make sure you have the right versions of everything in your Leaflet + Clusterer stack (Js and Css). Compare against the examples in the Clusterer Github repo.