Avoid overlap for a set of fixed nodes - javascript

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 ?

Related

How to draw edges on top of nodes in Vis?

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.

Make Cytoscape.js container just wide enough and just long enough

I am rendering several tree layouts in separate canvases using Cytoscape.js.
Currently, each canvas is enveloped by a container div with set dimensions (e.g. 400x400). Cytoscape offers a setting to fit each tree into its container, and will zoom in an out of each tree to the extent necessary to make the full tree visible within the given dimensions.
Instead of telling each layout to fit the container, I would like to instead resize each container to accommodate its child canvas perfectly. In other words, I need a way of asking each instance of the Cytoscape canvas, "What width and height would you be at 0 zoom", or "how many pixels do you need in each direction to draw fully", and then resize each container appropriately.
Cytoscape does offer methods to get the canvas's width() and height(), but those end up being the actual dimensions (which may not fit the container), instead of the "desired"/needed dimensions.
It occurred to me that I could come up with some heuristic to set the container's width and height based on the number of nodes and edges, but this approach hasn't proven fruitful yet; the number of nodes and edges tells me little about the final layout and arrangement, which alone informs decisions about desired width and height.
Have you tried using:
eles.boundingBox(options);
or:
eles.renderedBoundingBox();
'eles' has to be this:
var eles = cy.elements();
You can get two information about your nodes via the cytoscape methods mostly:
The actual position in cytoscape and it's rendered position, read this article for more information:
http://js.cytoscape.org/#notation/position
To your second question:
Aligning your tree is quite easy if you just call
cy.fit(/*eles, padding*/); // Pan and zoom fitted to the tree
cy.center(/*eles*/); // Moves the graph to the exact center of your tree
cy.elements().shift('x', offset); // Moves the nodes to the right, offset must be negative to move them to the left

3 dimension graph (nodes, arcs) using D3.js

Trying to visualize 3d graphs using D3.js. All nodes & arcs are fixed (eg X,Y,Z coordinates are known), no need for Dynamic Force-Directed positioning.
This example, from a commercial library, is great for nodes visualization:
https://www.highcharts.com/demo/3d-scatter-draggable
(rotation, different colors, more info shown on hover...).
How can one
do exactly the same in D3.js ?
add arcs? (having a list of arcs between nodes). Ideally, it would show the arc strength too, with a wider line when set to stronger.
Closest examples found:
https://bl.ocks.org/Niekes/d8007a5f71f45ab80a2977a8eb7ab3c9 - doesn't allow 3D rotation, no info on hover, no arcs
https://medium.com/ninjaconcept/interactive-dynamic-force-directed-graphs-with-d3-da720c6d7811 - no need for dynamic force, not 3D.

Marker arrows alignment in d3.js tree diagram

I am drawing tree diagram using d3.js. I have circular nodes and my path end points are the center point of circles.
I want to add marker arrows for the paths , if I give refX and refY properties as 0 marker is aligned properly but it wont be visible since my circle will overlap that.
I refered [this][2] question and calculated refX refY according to that
But still I am not getting the arrows well oriented and when I drag the node arrows are getting messed up still more .
Currently I am using noderadius as 16 and markerwidth and height as 6 (which is configurable)
I am using radial, horizontal and vertical views for the same tree. Can anyone give me a solution to draw these arrows with proper alignment and orientation?
This is how my diagram looks

Multiple forces in d3

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.

Categories