I'm using d3 to create an Org Chart, which has some nodes with longer names.
I've managed to modify the width of longer nodes, but have trouble properly placing their children and the lines (paths) to their children.
I tried calculating myself with determineChildXValue(), but that didn't work properly.
Is there a way to initialize the tree with variable widths so it will take care of the calculations of translations for child nodes?
Currently, I'm initializing it with hard-coded node sizes:
var tree = d3.layout.tree().nodeSize([70, 40]);
I've replicated the behavior in this example - expand Departments, then DEPARTMENT STORES to see the overlap.
Thanks in advance!
I consulted a colleague who was able to build a proper fix:
Define the source and target properties (before the projection is set) for the diagonal (paths)
Track the tierDisplacementX and cumulativeDisplacementX
Use these when translating the positions of the child nodes and their paths
See this fiddle to see the working code.
Related
I am using mxgraph javascript library. Scenario: one swim lane is added to the graph. Any shapes can be added as a child to the swimlane (drag and drop).We can add 'n' number of childs . how to make the swimlane size fixed irrespective of number of childs .When i insert more child vertex in different places, parent mxcell size getting changed.
expected child as below:
Tried with extendParentsOnAdd/autoextend property. Objects in child are overlap on each other as below
I suggest you to give a try to the mxgraph.extendParentsOnAdd property which seems to configure exactly what you are looking for:
https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.extendParentsOnAdd and set it to false
Specifies if parents should be extended according to the extendParents
switch if cells are added. Default is true.
You may also have to configure https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.extendParents
Specifies if a parent should contain the child bounds after a resize
of the child. Default is true. This has precedence over
constrainChildren.
There are also other configuration properties about auto extend, like
https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.autoExtend (this one is generally useful at graph load time when you provide the intial graph definition)
Notice that this question seems very close to Set mxgraph cell only draggable within the canvas width
I am trying to use D3 v4 to create a series of bubbles, each containing one smaller child element. Working off this circle pack example, and using the FlareVis bubble in the lower right as a reference since it only has one child.
I have changed part of the csv to read:
flare.flex,18000
flare.flex.FlareVis,2116
By giving the parent bubble a value I hoped that it would be resized independent of the value of it's child.
Instead the parent bubble seems to be calculated based only on the value of the child, even though the tooltip shows the parent's value as seen in the following image. What can I change in the code so that it calculates the parent's value?
Note: I am not trying to use padding to make the parent larger as both the parent and the child elements will each have separate values.
I appreciate the help.
I'm working with compound graphs. I know the positions (e.g.: geographic coordinates) of the parent nodes and I want to layout the children nodes in order to minimize the intersection of the edges. The final position of the children does not matter, provided that they are close to each other.
The CoSE Bilkent algorithm with Cytoscape.js gives me the right kind of layout but I would like to set the positions of the parent nodes and lock them in place.
What I've done:
Started with this example but with less nodes;
Set the position for each group:
Only the parent;
Same coordinates for parent and its children;
Adjusted some options of the layout;
Tried the attribute locked with no luck
The best I got is this.
So far, the relative positions of the groups is correct but if I add a new group g5 I got this.
The desired result would be something like this:
I'm open to use another library if needed.
(1) A parent's position and dimensions are implied by the positions and dimensions of its children.
(2) You can run a layout on a subset of the graph (e.g. children only): http://js.cytoscape.org/#collection/layout
(3) Avoiding edges from overlapping each other in a layout in a performant way is an active, unsolved research problem. Additionally, some graphs just aren't planar.
Try using (2) to run a layout on the subgraph of each parent's descendants:
var topLvlParents = cy.nodes().orphans(':parent');
topLvlParents.forEach(function( parent ){
var descendants = parent.descendants();
var edges = nodes.edgesWith( nodes );
descendants.union( edges ).layout( someLayoutOptions );
});
You can use cose-bilkent as the subgraph layout and adjust the positions to your desired bounding box on layoutstop (and this would be easier with boundingBox natively supported in cose-bilkent). Or you could use cose -- which isn't as sophisticated as cose-bilkent but allows for direct boundingBox placement today.
If your compound parent-child hierarchy is only one level, then you could try using any of the noncompound layouts on the children with boundingBox as well.
My understanding is that CoSE Bilkent is the most state of the art algorithm for compound node layout. It's from a university lab that specialises in graph theory, layouts, etc.
Im using this great article to produce a venn diagram with D3.
http://www.benfrederickson.com/venn-diagrams-with-d3.js/
It looks great but on occasion I get bubbles overlapping the the labels become hidden. Is there a way to make sure the text element is always on top? (see the picture below.. label A needs to be on top of circle B.
I found this good article but im struggling in how to implement this in the venn.
How can I bring a circle to the front with d3?
You should grab the latest code from master: this commit should fix the issue you had there https://github.com/benfred/venn.js/commit/4cb3bbef65b5b3c3ce02aee7d913e8814e898baf
Instead of having the 'A' label be overtop of the 'B' circle - it willnow move the label so that its in the certain of the 'A' region that isn't overlapped with 'B'. Some details are in this issue here: https://github.com/benfred/venn.js/issues/18
You might find it easier to work in actual layers. You can use g elements to create them. For example:
var lowerLayer = svg.append('g');
var upperLayer = svg.append('g');
Now anything you append to upperLayer will appear above anything you append to lowerLayer because the two g elements have been added to the DOM and are in a specific order.
Also check out this answer I wrote up for a similar question.
I have a tree graph very similar to the one here: http://bl.ocks.org/mbostock/999346 and I would like to limit the spacing vertically of the nodes; if you look at the tree you will see that when there are just two nodes, they take up the entire canvas (the link between the two nodes is very long), and as other nodes are inserted, the link(s) are resized to fit. I would like to limit the link length to some max number so that the tree is more compact with fewer nodes.
Jason Davies' approach of looping over the nodes after d3.layout.tree has run and overwriting each node's y-value works well for me. (described in this d3 github issue comment)
So, something like
nodes.forEach(function(node){
node.y = (node.depth * 90); // 90px per level.
})