This is not a new question and I have already referred to solutions stating that nodes must have their d.x d.y parameters set to suitable values before restarting the layout.
I have also created a simple block demonstrating this. However now that I have developed a more complex example here I am not satisfied with the result.
The reason being that as you click on the nodes, new nodes come into existence off screen and the force layout is erratic (not good), however once all the nodes appear at least once the nodes appear to behave as desired and appear close to the centre and hence produce minimal disturbance to the layout.
My feeling is that either this is the best I can expect from d3 or that there is some inconsistency in the data model model of my code.
The code itself is designed to display a smaller subset of a larger graph loaded from the JSON. It allows you to navigate a larger graph one subset at a time. The subsets being centred on the node that was clicked.
Related
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've created an interactive hierarchical D3 partition based visualization for displaying portions of a network. The visualization works by allowing users to traverse levels in the binary tree and down to a leaf level of /24 subnets.
A functioning example visualization can be interacted with on bl.ocks.org, with source and data available to create the visualization provided in this Gist (not inlined due to size).
In general everything renders correctly, however after a transition the new position of some rect elements becomes corrupted. An example of which is seen in the following screen shot:
Thus far the corruption appears unpredictable, is apparently unrelated to the underlying data, and is fixed during the next transition. Sometimes clicking around triggers it, sometimes it doesn't.
What might be causing these visualization errors? At first I thought it to be a concurrency issue caused by an async call to multiple interactions at once, but debouncing doesn't seem to fix things. My next fear is that it is just too much data for D3 to handle, but that seems unlikely.
The issue occurs in both Chrome and Internet Explorer.
I have a website which sends about 7 megs of json data to the client, where d3 (actually dimplejs) charts are rendered. The page is getting to be pretty slow and simply doesn't work in some browsers.
I'm thinking of rendering the svg in the server, instead of having the client browser do it. I've seen several references this technique. However, since labels, bar widths and so many elements depend the pixel height and width of the chart, and these dimensions are not known until client's browser renders the page, how do people handle such issues?
I'm not a web/front-end developer normally so I don't know if I'm missing something obvious or if my assumptions are wrong.
The simplest thing is to take the rendered <svg> and add a viewBox attribute to it. That allows you to specify how you want the browser to scale/stretch or crop the <svg> when it's placed inside a parent container (eg <div>).
Anything beyond that — like selectively scaling or repositioning text or rects or axes — can only be achieved the "hard" way; i.e. with code that has some awareness of the chart's semantics and programmatically alters certain svg attributes to react to container size.
Finally, and this is a long-shot: If you have full control of the output (I'm guessing your don't, since you're using dimple), you could attempt using a combination of absolute and percentage units to size and position things, as conceptually demonstrated here
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.