I am using vis.js's network diagram to draw a flowchart. I have some arrows that I need to overlap on top of some nodes. However, the arrows get drawn underneath the nodes. Is it possible to bring the arrows to the front of the nodes or draw nodes before the arrows?
I can provide some code and screenshots if anyone asks.
Thank you all in advance.
In vis.js edges connect "central points" of nodes and the nodes' shapes are usually displayed above those points. There's no concept of z-index indeed although one can deal with that for nodes. Discussion and workaround for nodes can be found at https://github.com/almende/vis/issues/3146 (basically one can change the order of nodes and re-render, the last node is shown on top, the first on bottom etc), but I'm not aware of workarounds for edges if there's any.
Related
We're making a graph for a project right now. This graph should show all crossways of a city. And most ways between them. We started of using cytoscape.js for drawing the graph. Now we want a background behind the graph. This background will be the map of that city, so it has to be scrollable and at the right position.
Our first idea was to make a rectangle node and give it a background. Than we added the map and put in the right coördinates. Now the map is scrollable and is always at the right position. This gave us two problems. First the graph can't be panned anymore, cause when you try to pan you will try to select the underlying node. We fixed this by using the cytograh-panzoom plug-in.
The seccond problem is, that the edges aren't clickable anymore, because the background-node is now covering them and it seems impossible to get the edges on top.
The questions:
Is there a better library to draw such a graph?
If not, is it possible to draw edges on top of the nodes with cytoscape?
Is there another way with cytoscape to do this?
Kind regards
You could listen to viewport events and update the background-position and background-size properties of a background image set in the CSS for your cy div.
Or in lieu of a background image, you could have a separate div with an image that uses CSS transforms instead of background-* properties.
Hi I have the following graph.The rectangles represent groups where the nodes inside or on the border of the rectangle are restricted to that rectangle. I am using d3 force layout to layout the nodes but then restrict them to the bounding rectangles in the tick.
What I need is,
1. One force layout to handle the nodes as they currently do
2. A second force layout that handles the rectangles in the graph, so that rectangles don't overlap with each other.
It would be an added bonus if the rectangles could also be stopped from overlapping with nodes that are outside the rectangles to avoid confusion.
Can anyone point me to an example that does something similar or code something up quickly to demonstrate how this can be achieved.
Thanks.
Good morning,
just starting with the awesome d3js library ...
I want to show only a portion of a graph with the force directed layout. The idea is to have one node declared as the "center" and show all nodes within a distance of two (for example) from this center node, the neighbors of the center node and the neighbors of the neighbors. If the user clicks on one of the displayed nodes it becomes the "new" center node and a different "subgraph" is displayed. I wonder if there is an example around implementing this kind of subgraph layout and if some kind of a "node-distance" algorithm is already implemented in d3js.
Thanks a lot
martin
UPDATE:
Just found the example Modifying a Force Layout which illuminates how to add and remove nodes and edges from a force directed layout.
I just uploaded a "proof of concept level" of an interactive force directed subgraph.
http://justdharma.com/d3/sub-graph/
In this example I use backbonejs under the hood. Being the first time I implement something with backbonejs, I for sure use it in a very crude manner. While this example might illuminate one way how an interactive sub-graph can be achieved it is for sure not a template how to do it - as said just a proof of concept hack ...
This isn't implemented in D3, and I'm not aware of any examples. What you would have to do is the following:
Set the fixed attribute of the new center node to true to prevent the force layout from changing its position.
Set the px and py attributes of that same node to the center position.
For each node in your force layout, compute the shortest path to the new center node.
Depending on the length of the path in each case, either remove the node or keep it.
The trickiest part here is the computation of the path from each node to the new center, but even this is a pretty standard algorithmic problem. Another thing to keep in mind is that you need to modify the data structures that contain the nodes and links of the force layout in place, i.e. you can't set new nodes and links for the force layout and expect everything to work smoothly.
I am using d3 to draw a graph where the nodes are all fixed.
In my use case the nodes are not of the same size and they are connected using edges.
It is similar to the graph here - http://linkedjazz.org/network/
I am trying to place the nodes over the oval shape.
Here there happens a lot overlap between nodes which i want to avoid.
Is there anyway i can see if there are 2 nodes overlapping and adjust the location with my logic , so that i can place the nodes in a rightly oval shape ?
Is it possible to start with a plot (in jqPlot), either as a function or a list of points, and make it possible for the user to add or remove nodes on the graph? Ideally, it would keep the line/curve the same and just add another node, though with some curves that obviously won't be possible. It isn't crucial that the existing nodes stay in the same place; in fact, it is crucial that the nodes remain equidistant along the x-axis. I'm using Can someone point me in the right direction?