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.
Related
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.
I'm wondering if there is a way to have a D3 force graph form a specific shape. Here's what I mean. This what the graph looks like right now.
What I want is to be able to have the nodes form a shape such as this:
(ultra pro ms paint skills)
So I want all the nodes to be inside the black line, forming this shape. Is there a way to do this inside d3?
No, you can't do this directly with the D3 force layout. It doesn't allow for any additional constraints. What you can do is enforce this layout yourself in the tick handler function:
force.on("tick", function() {
// iterate over all nodes, check if they're in a position they shouldn't be in
// if so, adjust the position
});
That said, you almost certainly don't need the force layout in this case. As suggested in the comments, it would be easier to manually position the nodes along the shape that you want. Again, there's no support in D3 to do that.
Is there a way to create a horizontal bar chart (or modify the row chat)?
The row chart does almost what I want, however I want the y axis to be a continuous variable and it seems the row chart defines the y axis in terms of discrete/ordinal variables.
I was also thinking about rotating the svg with d3. (Rotating the whole div worked, however the brush effect did not rotate too).
I was thinking:
dc.renderAll();
d3.select("body").select("#barChart3").select("svg").attr("transform", function(d) { return "rotate(90)"});
however that erased the whole chart rather than rotating it.
Any suggestions?
Update:
I am having some success with rotating the svg (the brush works), however the graph is being cut off and I can't figure out why...
The two charts are completely different codebases and have different features. The Y axis of a row chart does not even use a scale, so you are quite right that it can't be made continuous in its present form.
It is an eventual goal to merge them, but for now I think rotating is your best bet.
As for the clipping problem you're having, look for the clip-path attribute on the generated SVG. It would need to be rotated as well, but for a quick fix you can probably remove it.
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?