I am working on a web-based graph visualization/manipulation tool and I am evaluating a bunch of JS libraries including Cytoscape.js, jsPlumb, visjs for this purpose. Some of the high-level requirements include:
Ability to display a graph of nodes based on JSON data (supported by Cytoscape.js out-of-the-box).
Support creation of new nodes by dragging from a pallette outside the canvas and dropping it on the canvas (Cytoscape-node-add somewhat supports this use-case)
Ability to connect nodes by clicking on specific points in source node and dragging a connection to a specific point on a target node. (mostly supported using the extensions Edge-Editation and Edge-handles)
A good 'event' system for letting the enclosing system know when interesting things happen (e.g. a new node was created/dropped, user has selecting a node, user has moved nodes etc)
I really like what I read in the Cytoscape documentation and the demos convey that this is a pretty robust library. However, I have the following questions:
Is it possible to provide a HTML snippet to be rendered for each node? For e.g depending on the 'type' attribute of each node (specified in json) I would like to display an image, show some text etc, on each node. The documentation mentions background-image for a node, but that's not exactly what I am looking for.
Is it possible to restrict the points on a node that a user can start dragging from, to connect different nodes? I realize the Edge-Editation extension already provides some support, but using it, the user can start dragging from any point on the node. Also, after connecting two nodes, the edges move around the borders of the node if a user drags a node around the canvas. I would like to restrict this behavior so that the edge is always attached to the same point on the source/target node.
Given the specific requirements, I am guessing that I have to write my own Cytoscape extensions to do these things. But I wanted to know if there was something that I could re-use or re-purpose.
This is a rough sketch of what I want to achive.
Any help with these would be really appreciated.
Thanks
(1) You can't render HTML in canvases, but Cytoscape does have support for SVG background images on nodes. So you can put whatever content you want to draw on nodes that way.
(2) You can make a PR on one of the edge editing extensions if you want to have more control over the handle placement. They already have some customisability in that regard, but it sounds like you want a bit more.
Related
I am attempting to implement a network graph using Vis JS library and would like to implement a group of nodes that are inside a logical group (box). VisJS allows grouping of nodes but is not implemented in a visual way that I am looking for.
Another library that executes this perfectly is GoJS: http://gojs.net/latest/samples/basic.html
Another example from VisJS that shows network graph I would like to implement, but no example in documentation: http://visjs.org/docs/img/vis_overview.png
I would like to have nodes placed into larger boxes to represent the group of nodes.
Any ideas or suggestions for implementing this?
I'm the developer of the network module of vis. Our apologies for not seeing this issue sooner, but most of our communication is done through GitHub.
On the upside, since the release of v4 we support render events. You can use these to draw whatever you want on the canvas, including borders behind groups of nodes. Take a look at the example:
https://visjs.github.io/vis-network/examples/network/events/renderEvents.html
Keep in mind that this is aesthetic only. The physics engine will not compartmentalise these boundaries so the nodes may interact with the others.
We often hear this request from people who want to use vis network as a flow editor. Even though this is not your issue Id like to point out that this is not what we designed the network for. We may have a module for this in the future though.
I need to create an hierarchical tree (something like this), but i need some features:
Ability to design the nodes as i like (size, background image, fonts etc.)
Automatic layout
Ability to connect nodes by drag N' drop
I've looked at GoJs and its great, but it's canvas based, and i couldn't find a way to make the nodes look exactly as I want (actually not even remotely close).
I've also looked at d3.js which is also great but again, since it's SVG it's haard to design the nodes.
The main hustle here is the layout, and connecting the nodes, i can handle the Drag N' Drop my self, Is there a library out there that can handle the layout for me , so i can create the required div's, design them as i see fit and let the library do just the layout stuff?
Here are some sample libraries.
If you want to avoid canvas, try implementing drag n drop for the following
CSS3 Family Tree
SlickMap
or else see some canvas based libraries
JavaScript InfoVis Toolkit's HyperTree / SpaceTree
jsPlumb
Whilst a late answer, hopefully it can help others in the future.
Here is a drag and drop tree utilising the excellent D3.js library.
http://bl.ocks.org/robschmuecker/7880033
https://gist.github.com/robschmuecker/7880033
The tree in the example handles automatic layout/sizing, zooming, panning, drag and drop and is collapsible. All or none of the aspects can be removed if needed.
I need to create a topology (network) diagram, which will be integrated with my extJS application. Is anyone familiar with some Javascript packages with APIs for creating such a diagram, taking care of: positioning the nodes in the diagram, zooming, and dragging the nodes?
In addition I want to use some custom icons for the nodes in the diagram.
You might look into yEd/yFiles (https://www.yworks.com/products/yed) It's Java, not JavaScript, but it will definitely run as an applet since it does so from their site as a demo. Might work if this is for an intranet to just embed it in the middle of an ExtJS panel. Otherwise I recommend you read and re-read the drag and drop API for ExtJS and review the source code for them as well if you intend to code it yourself. Also from a google search:
https://github.com/jgraph (commercial)
https://www.jointjs.com/ (MIT Licenses)
I have a dataset which is best represented by a graph. It consists of nodes of 6 or 7 different "types" with directed edges (dependencies on one another, guaranteed not to have cyclic dependencies). The dataset is essentially a template of a layered configuration, and the user needs to be able to select bits and pieces of the configuration from different layers which are desired, and have the dependent bits be brought in automatically.
The general UI need is for a user to select or un-select items from multi-select boxes (one such box for each node type), and have "depended-on" items in the other boxes become selected or unselected as needed. I need to be able to pull down the dataset from the server, let the user select the desired bits (with the dependency processing being done in javascript on the client side for responsiveness), and then submit the result back when they are finished.
The dataset is large and complex enough that actually showing it as a graph would be overwhelming and confusing to the user. Only basic graph traversal operations are needed, since all that is required is to cascade selections out the dependencies. (For example, a user un-selecting a node would result in that nodes dependencies becoming unselected if there were no other selected node which still depended on them. A user selecting a node would result in all of that node's dependencies becoming selected.) A simple depth or breadth first search following directed edges from the start node will suffice to visit all affected nodes. If I can follow edges either direction, bonus. (If not I can easily generate an edge-reversed graph and use that when needed.)
I have dug around on here and found references to a number of javascript graph visualization libraries, but most of these discussions seem to interpret "graph" as "chart" and I have no charting needs here. My digging has led me to this list: Raphael, protovis, flare, D3, jsVis, Dracula, and prefuse. From this list it looks like jsVis or Dracula might have the underlying graph constructs I need if I just ignore the visualization side, but it isn't clear to me from the documentation if that is the case. I have to rule out a few others because I cannot bring in any flash dependencies. Unfortunately I don't have time to prototype things with this many libraries. (I will be digging into jsVis and dracula more though, barring some handy input here.)
If anyone has experience with something from that list and believes that the graph portion of it can be used independently of the visualization portion, that will certainly meet my needs. If there is some other library I could use that meets my needs, that would be great too. One final requirement regarding licensing: the library needs to be "free" in a non-copyleft way - So ideally Apache v2.0, BSD, MIT, or something like that.
I haven't used it, but you might want to check out data.js. It's an MIT-licensed library with a range of data-structure utilities. In particular, it includes Data.Node and Data.Graph:
A Data.Graph can be used for representing arbitrary complex object graphs. Relations between objects are expressed through links that point to referred objects. Data.Graphs can be traversed in various ways.
I want to create a map dynamically and display it on the website. You can call it to be more of a graph than a map. Here I take the source and destination from the database. There can be many sources to a destination or many destinations for a source or both. Also there can be many other locations directed to/from source/destination. Source and Destination will always be there. But other locations are optional. So for example the route could be
L1 --> L2 --> Source --> Destination --> L3 --> L4.
where L1-L4 are locations (optional)
I want to depict this diagrammatically on a website. The user should be able to click on a each location/path (depicted as the arrow line above) and a popup should be opened. In the popup some data editing can take place. Also along the path(arrow line) some data has to be displayed. Basically all HTML,JS functionality should be available for this diagram.
Can someone please suggest me which language I can use for this?
I checked out some of the map APIs. But they expect some kind preloaded image to be present. That is not possible in my case.
The site I'm working on similar to any air fare info site, where we select multi city and get different rates for different airlines. I want to show this graphically with nodes representing locations and lines representing paths and should show rates along paths and stuff like that.
Any pointers will be appreciated.
Thanks
Some of your options are: SVG, HTML Canvas, or HTML+CSS. Given your desire to track events per object, I would rule out HTML Canvas: binding events to objects in a retained drawing system is much easier than manually processing events based on mouse position.
I would recommend using either SVG (if you can limit yourself to browsers that support it) or a drawing API like Raphaël to abstract support over SVG and VML for IE. You will have far more flexibility of drawing and hit detection than using HTML divs plus backgrounds.
Although I haven't used it, Google found the Joint library (that uses Raphaël) for a higher abstraction than the drawing level. Perhaps this meets your needs.
If I understand you correctly, it sounds like the google maps api would work for you:
You can find more info here. here
Additionally, you may find this info useful.