Make Cytoscape.js container just wide enough and just long enough - javascript

I am rendering several tree layouts in separate canvases using Cytoscape.js.
Currently, each canvas is enveloped by a container div with set dimensions (e.g. 400x400). Cytoscape offers a setting to fit each tree into its container, and will zoom in an out of each tree to the extent necessary to make the full tree visible within the given dimensions.
Instead of telling each layout to fit the container, I would like to instead resize each container to accommodate its child canvas perfectly. In other words, I need a way of asking each instance of the Cytoscape canvas, "What width and height would you be at 0 zoom", or "how many pixels do you need in each direction to draw fully", and then resize each container appropriately.
Cytoscape does offer methods to get the canvas's width() and height(), but those end up being the actual dimensions (which may not fit the container), instead of the "desired"/needed dimensions.
It occurred to me that I could come up with some heuristic to set the container's width and height based on the number of nodes and edges, but this approach hasn't proven fruitful yet; the number of nodes and edges tells me little about the final layout and arrangement, which alone informs decisions about desired width and height.

Have you tried using:
eles.boundingBox(options);
or:
eles.renderedBoundingBox();
'eles' has to be this:
var eles = cy.elements();
You can get two information about your nodes via the cytoscape methods mostly:
The actual position in cytoscape and it's rendered position, read this article for more information:
http://js.cytoscape.org/#notation/position
To your second question:
Aligning your tree is quite easy if you just call
cy.fit(/*eles, padding*/); // Pan and zoom fitted to the tree
cy.center(/*eles*/); // Moves the graph to the exact center of your tree
cy.elements().shift('x', offset); // Moves the nodes to the right, offset must be negative to move them to the left

Related

Detemine all elements at a given point js

I am working on an API that use shapes (and irregular) shapes to build websites. My problem is where I can provide a div that can carry as a background to irregular shapes so .
However to do this I would need to know the max area the object is taking up by having the max height and width.
I am aware that element.getBoundingClientRect does this but my roadblock is that is does not consider any psuedo elements, which is how most of these shapes are made.
I know when working with the CSS transform property, especially using scale, the browser knows to resize the whole shape including the pseudo element that makes up the shape.
It also uses the border-box coordinate system.
However the browser does not provide this information as it comes from the user agent
My main question is how do I access the dimensions the user agent computes for any given element, or how do I find the proper dimensions of a 'getBoundingClientRect' that considers an elements psuedo classes
My shapes can be found in the attached links.
httpsmichaelodumosu57.github.iosigma-xi-mu
https://css-tricks.com/examples/ShapesOfCSS/
I can't afford to use any other method to create my shapes because I have limited time on the project, but I do know that the browser can provide me with the information I am looking for.
Yes I have answered my own question. What you want to do is to scale the image to a very small since (since transform scale() works perfectly) and place it in a grid box (this could be a div of small size as well. You would run document.elementsFromPoint(x, y)
(notice the pluralization) on every point in the div containing you shrunked irregular shape and from there you can find the height and width of its bounding box by the difference of the highest range of their respective coordinate values. To center you must place your irregular shape in the bounding box of the background drop with the re-scaled dimensions (remember your skrunked your irregular shape to find them) and have the margin of the inner shape set to zero. This works only if your real (not pseudo element) is to the left most of the screen. Question is how do you position your background when your irregular shape is not properrly centering inside of it?
You can use document.elementFromPoint(x, y) for getting the element that exists in specific point, but I have not tested it for any kind of shapes.

Create HTML grid from output of rectangle packing algorithm

I'm using the rectpack python library to obtain the optimal rectangle packing positions for div elements that contain d3 charts. I have the height, width, bottom-left corner x coordinate, bottom-left corner y coordinate for the div elements on a 1200px wide canvas that looks like the plot below.
Note: Due to the nature of the project I have to iframe the d3 chart HTML in my grid. I only have the width and height info for the charts and they may also be later replaced by another kind of charts like bokeh chart HTML outputs for example. So, positioning the divs is my only options for this.
I need to translate this into a HTML grid but since I'm not a web developer I'm kind of stuck as to how to create such a grid with the information above. I'm using the jinja2 templating engine to create this. However, I'm stuck trying to position the divs exactly since there doesn't seem to be an obvious place to add the position information outside css. But since each element is unique, dynamically creating css for each element doesn't seem to be optimal.
What would be the best approach in this scenario?

Generating SVG pattern from the centre

I am creating a grid pattern (as per this solution) on the whole viewport.
The grid is generated from the top-left of the viewport, however, I want to generate it from the middle of the screen so that it consumes the whole screen yet is aligned from the centre. How can I achieve this?
You need to change the x and y attributes of your SVG pattern. This website explains how you can various alignments for your SVG pattern:
http://tutorials.jenkov.com/svg/fill-patterns.html

Avoid overlap for a set of fixed nodes

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 ?

KendoUI Restrict the Dimensions of the SVG and Paths

I am having trouble constraining the dimensions of a KendoUI line graph to the parent div. For some graphs it works fine, but for charts with more data values along the x-axis, the svg is fed pixel dimensions greater than the dimensions of its parent. The same is true for the path dimensions. This creates overflow in both x and y. Is there a way to force the svg and various paths to scale to the dimensions of the parent div?
Set the width on the chart div itself. I constrained one here. It looks terrible, but just to show that you can squeeze it down..
http://jsfiddle.net/burkeholland/drXnR/

Categories