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/
Related
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
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?
I'm just trying to plot a function in javascript by using the d3.js library. I need to add the zoom and pan events. I've done it by following this example:
http://bl.ocks.org/mbostock/7ec977c95910dd026812
I've drawn some lines on this plane.
My problem is that when I zoom it, the linewidth changes too.
What I like is that line still having it's original width when zooming. I think I have to redraw it, but I'm not sure if this is the best way.
Can you tellme if there is a better way of doing this, or show me any simple example?.
Thank you!
As you have not supplied any code it is a bit hard to tell. From your description the grid lines you are rendering are being transformed by the zoom matrix.
You can either draw the grid independently of the zoom but you will have to switch between zoomed and grid transforms and will require more code or just re-render the grid lines with the width set to the width times the inverse scale. Eg if your grid lines are two pixels then you can can keep them that width by setting their render width to 2*(1/scale) which is the same as 2/scale. Scale being the amount of zoom. The same applies to any objects you wish to keep at a fixed render size.
There is no easy way to avoid re-rendering the gridlines
This is what I was looking for:
http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke
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
I am trying to use webgl-surface-plot to give a 3D surface plot of data. At several orientations, the axes labels get clipped. At other orientations, part of the graph gets clipped. Is there a way to expand the canvas size and/or move the axes labels closer to the axes?
You can change the default scale/zoom in the code and then just increase the canvas dimensions via the input options. I plan to add the starting zoom as an option to the chart, when I get a chance. I want to fix the axis labels as well. Currently they are at a fixed distance from the axes. They should, instead, be at a distance dictated by the length of the tick labels. Fixing this will be quite tricky, though.