I am working on some graph visualizations, and I am using the JavaScript library graph Dracula. Now, with this library, when I want to move a node I have to click the node I want to move and move it on the desired place (with drag and drop). But, what I want to do is to select more nodes and move all of them. I can't figure out how to do this, since I am not so experienced in JavaScript programming. So, my question is:
How can I select multiple nodes with rectangle selection and move
them?
How can I select multiple nodes with, say, Ctrl + left click and select more nodes and then move them?
By the looks of things, almost all of Dracula's graph rendering is really managed by RaphaelJS.
In which case, things may be quite a bit easier for you. It seems other people have asked how to move elements in RaphaelJS.
Related
I have a graph of people who interact with each other.
The graph is quite messy since everybody interacts with each other. What I need is:
Display the "main" person in the center
Display only the first level of interactions
When the user clicks on a node toggle its children visibility (without displaying children of children)
I've read about compound nodes, but the thing is that one node (person) can have many parents and it's not supported in Cytoscape.
This is what it should look like. The red circle is the "main" person. The red rectangle is the first level of interactions. The rest should be hidden till the user clicks on a node, which reveals its direct children.
The only idea I got is to manipulate the data I provide for the chart. Right now I have an array of vertices and edges. Edges have source/target. So I probably can handle it in javascript by manipulating these arrays.
But is it possible to somehow simplify the process?
You can use view-utilities extension of cytoscape.js which provides hide/show functionality. See its API that has hide, show and showHiddenNeighbors functions. You can also play with its demo here.
In my application, a graph is loaded initially with the one-net of a particular node. The user can expand the graph by double-clicking any node to add its one-net.
The problem is that every time the user does that, the nodes all jump around, so it's confusing. I don't want to just disable physics, because then the new nodes get jumbled on top of the old ones. For lack of a better explanation, I want to freeze the existing nodes, only using physics to arrange the new nodes (and then freeze them before adding more). I looked at Stop vis.js physics after nodes load but allow drag-able nodes, but that doesn't solve my problem.
I'm pretty clueless about what the various options to the physics solving algorithms mean, and can't find a good description anywhere, so I wonder if there may be tweaks there that would help me.
Thanks!
You can give some of your nodes a fixed x and y position. There are also methods like getPositions() and storePositions() to retrieve or set the positions after the first stabilization or something like that.
I have a calendar-like view that shows a table with one column per day of the week (see this image). Each row represents a specific thing that can be booked for a time. The idea is now that a booking can be extended by dragging the outer edge to the next day in the table, or shortened the same way. The active booking has a span on each side of the cell that is supposed to be the handle for dragging.
My main problem now is that the usual drag & drop features in browsers don't seem to fit my situation. I don't want to drag something and drop it anywhere else, I just want to drag to extend the item.
Is this still something that can be done with the usual HTML5 drag&drop feature or some generic drag&drop library? Or is there any other way to achieve this? Any pointers on how to approach this problem?
I'm using React for this, which might make some solutions difficult to integrate if they manipulate the DOM directly.
ummm not sure what to do here , I thinks its unlikely the link will change soon , I can describe the repo 'Allows individual or group selection of items using the mouse. Click and drag to lasso multiple items, hold the cmd/ctrl key to select non-adjacent items'. I can briefly describe what the lib code does: uses keydown, keyup and mousedown listeners to create an overlay and detect covered nodes in the DOM .
I am trying to make a webpage, where I want to plot points with which I can associate Mouse events (Jquery).
So, I guess I want them to be dom objects and not want to just paint them. (Please suggest if we can paint using html5 and still treat them as dom elements)
So essentially I have a text files with x,y co-ordinates and I want to plot those but want to associate Jquery events with them. for example: on left clicking them a graph appears or right clicking them a menu appears depending on which node I clicked.
Imho, it would be a very silly approach, to write DOM elements with lines and dots.. For instance, how would you make a round line - you could create diagonal lines with border CSS styling but.. Well - there are many options available! Another approach could be Highslide.
jqueryui-visualize
jQuery top5 graphing tools
http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
Demo
Dojo Toolkit
Since you for some reason have tagged this with dojo, check out this blog entry;
http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
2dChart Demo
Read about Scrolling / Zooming here
Zoom Demo
Here's a nice little introduction slideshow from an apache user
Well, several approaches.
You can take your coords and create absolute positioned elements on the DOM using those points. Using jQuery you can set 'top' and 'left' points to position them. This method may be easiest for you because jQuery can easily apply click events.
You can use the HTML5 canvas and draw shapes onto it using the coords from your file. With this method you would either need to write your own event library or use libraries already written such as kinetic.js. Also styling these is going to be a bit less dynamic and extensive than using DOM objects and CSS as with the first method.
I'm using a modified version of the following example and everything works great so far.
What I am trying to do is to make the nodes bounce from each others and not overlap because I can't see the text and icons of a node if there is another on top of it. Is there a way to make this happen without modifying too much of code that works already? Maybe add something like enabling collision for the nodes?
ok i its seems that setting the charge to .charge(-300), sets the nodes apart by pushing them away from each others.