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
Related
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 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.
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.
I'm trying to make a column graph in Highcharts and it's not working out too hot. I'm essentially trying to give the column a background color that the data point can overlay. I want the effect of stacking without actually stacking if that makes sense. Any thoughts on what I can do?
Essentially I want it to look like a progress bar... there should be a distinct coloring between the top of the bar and the top of the graph itself. I've already tried stacking: percentage, but to no avail. Thoughts?
There are three options that come to mind:
1) To achieve the 'effect' of stacking, actually stack it: use a dummy series with a color set to the background color that you want, and set with values to fill the gap from the actual data.
Example:
http://jsfiddle.net/jlbriggs/Zf8C7/5/
[[edit for questions
The order of the series does not matter for this to work, and neither does the legendIndex.
What does matter, if you are using multiple series, is the stack property for each series - http://api.highcharts.com/highcharts#series.stack
Each group will need its own stack, and the dummy series and real series within each group need to be assigned to the same stack.
In addition, you need to have one overall max value.
Updated example:
http://jsfiddle.net/jlbriggs/4d9tm6b8/4/
(keep in mind, there are much smoother methods to process and build your data - this is a quick and dirty example whose purpose is to show how to properly use the stack property to do what you need)
]]
2) plotBands, as mentioned above
3) using the alternateGridColor property and set your data to skip an x axis
value between each point.
Reference:
- http://api.highcharts.com/highcharts#xAxis.alternateGridColor
Is it possible to move any elements added using
chart.renderer
as we update the range or the navigator handles?
There is a square in this fiddle. Can we shift its position as we update the navigator?
Or can you point me to the function in the source code that can help?
Thanks
Update: i want to draw trendlines/ fibonnacci retracements etc. based on user events. Currently, i draw & drag the lines using chart.renderer until the mouseup event, calculate the x,y values of the end points, delete the rendered lines & then add new series which visually imitate those rendered lines. This is surely not the best solution. The issue is how to remember the position of the user selection & show/scale the same only when those lines are in the visible range.
So i am wondering if we could directly use some internal "scaling" function that calculates the visible points of the series based on the current extremes.
Rendered object's position is basend on pixels, so when you use navigator, pixels "are the same" so object stay in the same position. But you can catch navigator "sliding" by setExtremes and aftersetExtremes functions and then move element by translate().
Simple example of using translate():
obj.translate(120,20);
http://jsfiddle.net/Ne7QV/1/
Only what you need is common both elements, according to your expectations.