I was hoping to find a way to pack circle nodes into rectangles defined by their aggregate totals, but am struggling to find a way how. After failing at implementation a version described here, I wanted to reach out and ask if there was any known way to do this generally. I have attached a JSFiddle of what I currently have - I've initialized a number of nodes, assigned them randomly to a group number, and am calling the barView function which separates these nodes dependent on their groups. I am hoping to have these nodes be confined within the dimensions of their respective bars, such that dragging these nodes cannot remove them from their box, but they can move within it. I would really appreciate your help in this.
Thank you!
http://jsfiddle.net/abf2er7z/2/
Related
I am currently using Cytoscape.js to display a variable amount of nodes using the circle layout. I now want/need to add additional groups of nodes around the original circle, with each group also represented in a circle layout.
The resulting visualization would look something like this:
(where each circle is a circle layout of nodes)
The additional groups don't necessarily need to be directly around the original layout, as the amount of circles also varies. I mostly just need to position the layouts such that they don't overlap each other.
I was able to add the additional groups as individual layouts, but I am unsure how to go about positioning them. I checked the docs and unless I missed something obvious, I didn't see how to accomplish what I need. Any pointers in the right direction would be appreciated!
Specify the boundingBox of each layout to tell it where the bounds of the nodes in the layout should be. Specifying a boundingBox tells the layout to put the nodes within the box. Make sure to specify adequate space and set your overlap-avoidance options appropriately. Overlap avoidance can make a layout need to use more room than it has allotted to it.
I am building a web app where the user can create a sort of bipartite graph like this one:
Sometimes the user would like to build a huge graph, for example a graph in which the topmost layer has 784 nodes, as in the next picture. My application can handle the computation, but the result is ugly and meaningless:
Do you have any idea for rendering a huge layer without just drawing all the nodes but, instead, summarising them with another, prettier representation?
Until now I have thought about putting all the nodes of a "huge" layer in an empty compound node, but of course then it is not possible to draw some edges (so the huge layer would seem as it were disconnected from the graph). Another solution would be to have all layers with more than 100 nodes have exactly 100 nodes, and put them inside a compound node with z-index greater than each node's z-index; but I haven't tried this yet.
If you have some other ideas, or if Cytoscape.js provides a way to summarise large graphs, please let me know.
Thank you.
you could group nodes when the amount in a layer exceeds a certain number (e.g. if you have 100 nodes, you combine them into groups of 25)
I'd do this by iterating over the nodes in the layer, making a new node N for each subgroup (inserting all relevant information needed), and then replacing any mention of the replaced nodes by N in all relevant edges (finding connected edges).
As I personally generate layouts/nodes in python before sending them to cytoscape for visualization, I'll refrain from posting a potentially ineffecient/incorrect javascript/cytoscape example :)
I am writing an animation using d3, and I cannot seem to find a way to easily ensure that a graphic always appears "behind" other graphics.
Specifically, I am dealing with lines and circles (imagine a directed graph), and it sort of looks bad to have some of the lines on top of the circles, and others underneath. Is there a way to set the z/depth of certain graphics, in this case my lines, manually? I apologize if this seems google-able, but I attempted typing "graphic depth d3" and other variations and got nothing.
EDIT : Accepted answer works, a more detailed description of the problem can be found here.
SVG doesn't have a z-index property or similar, the elements are drawn in the order in which they appear in the DOM -- elements higher up are drawn behind elements that have been added afterwards.
The easiest way to group elements into layers is to use g elements. So in your example, I would use two g groups, one for the lines and one for the circles. Add the g for the lines first and then all of the lines underneath it. If you then add the circles to the second g that you added afterwards, all circles will always be on top of all lines.
I am trying to make a visualization using d3 which is basically a scatter plot with links between the points. (I have attached a .gif of the existing java based visualization)
The points can be added by double clicking other points. On hovering over a point, I wish to have links drawn between the point and all its partners on screen.
I have the part where on double clicking a node, its partners are added. What I need help with is drawing the links (primarily I am not able to understand how can I get the x1,y1,x2,y2 values required to draw the links).
This is what my DOM looks like:
I have seen a lot of examples online but somehow not able to figure the solution - if anyone could link me to a similar visualization or share a fiddle/ give some pointers on how this can be achieved I would be really grateful.
First the simple stuff: here are 2 mechanisms for drawing the lines.
Next, in terms of the data representation of the lines, check out how links are typically drawn when working with the force directed layout.
Important: Do not get distracted by the existence of the force layout in this example and by the fact that the force layout works with these links (which are passed into it by calling force.links(links)). That aspect of the example probably doesn't have an equivalent in what you're trying to achieve.
However, do notice how the links array is constructed —— with each element of the array being an object with pointers to source and target datums. In your case, you'll want to work with a similar links array, where source is the node under the mouse and target is a node that's connected to it. So you'll end up with an array of links who all have the same source datum but unique target datums.
You can then bind the links array (via the usual .data() method) to a d3 selection of line or path elements. Once you bind, you can use the usual enter, update, exit pattern to append, update and remove (on mouse out) the drawn lines.
Given a source and target datums, you can calculate the x and y of the endpoints in the same way you currently calculate the translation of each <g> element, presumably using a d3 scale.
I am working on a force directed graph using D3 and I am showing all the nodes displayed in the graph in a separate table beside the graph area. I have checkboxes in the table that I am displaying which gives me the option of selectiong the nodes.
I am trying to highlight the nodes and the relations between them. I have been taking pointers from this example Highlight selected node, its links, and its children in a D3 force directed graph. This example is for one particular node and its children but I am trying to highlight more than one nodes if they have any relation between them.
Any help on this will be really useful.
I'm not using a force directed graph but rather a "Radial Hub and Spoke Diagram" (a.k.a. a "Radial Wheel") but the premise should be the same. In my example, the relationships are represented by the pie arcs and the nodes in the relationships are at either end of the arcs. In the example, you'll see how I select specific nodes and/or relationships (i.e. mousing over any arc or node name) or many nodes and relationships, simultaneously, based on types (mousing over the Color Coded Type Key).
In either selection example, it comes down to assigning unique identifiers to each element in the drawing. You can see how I do this by searching for .attr("class"...) and .attr("id"...) statements. Once you've assigned such unique identifiers, you can then use them to create selection combinations. You can see how I perform such selections in the .on("mouseover", ...) functions.
BTW, could you please post your example to bl.ocks.org? It would be easier to help you if we can see at your code.
I hope this helps.
My Best,
Frank