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
Related
I have a database where I maintain an entity Ids in one table while maintaining a source and target entity on other table.
I have generated a json of nodes and links. and used the following example as a reference (thought it would be enough to only generate the json file):
Force directed graph for D3.js v4 with labelled edges and arrows
Same code with my generated data
The issue is that the graph is messy and I can't infer anything by looking at it. so what I'm trying to do is, since I am familiar with the relations between the entities I would like the nodes to be ordered top down by labels by some certain order. e.g siteref -> ro -> ba -> gr -> ca
Is that achievable at all? I have looked around for some other examples but did not find anything that could suit my needs.
You can add forceY, and optionally pass it a strength. In the forceY function you can set to return 0 for siteref, 100 for ro, and so on. Then you can tune in at your needs by playing a little bit with the strength in the links and in the different forces. Here is an updated fiddle so you can take a look at the idea. Update fiddle
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/
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 :)
First I have to say I'm an absolute beginner with D3.js.
I was searching the web for a long time, but couldn't find any matching solution.
I want to read a JSON file with subjects, predicates and objects. Mostly like RDF, but the nodes (subjects & objects) have a weight, so I want them to appear in different sizes.
Also it would be nice to have some kind of interactivity: the labelled attribute of the edge (predicate) should only be visible, when I zoom in or click on it. Also, a popup with further information would be nice, if I click on a node.
I'm looking for the most lightweight solution, but would be happy about any approach!
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.