I am new to d3.js here, please help, where i want to apply scrolling to div, which has svg and underneath legends, legends will be added dynamically based on the multiline chart, for demonstration i put through single trend line but in real time there will be like 10 to 20 trend lines in the single chart. The issue is the with legends, are cutting off, i know this is because of svg has height limit, how to overcome this problem?, i have tried applying overflow-y:scroll to svg but doesn't work, tried putting legends in foreignObject element works fine but doesn't work in IE, the application that i am working on will run in IE mostly.
Any help is much appreciated.Plunker
It looks like your problem is with the height of the SVG itself. Try resizing the SVG to something larger like:
d3.select('svg').attr('height', 600);
Even try this in the console.
The SVG doesn't really have a max height (as far as I am aware). The problem is that your div is a larger height (400 px) than your SVG (~370px). If the SVG is larger than the div, according to your y-overflow: scroll, it will be scrollable, but will retain the appearance (because of the div) of being 400 px tall. However, if the div is larger than the SVG, there's nothing to scroll.
Related
I am using amcharts and I have a grid layout on my page to store 3 elements: List, map and radar chart.
The radar chart doesn't display properly for some reason. It doesn't matter what dimensions and sizes I give to the parent div, it doesn't display the radar with all the labels. It always cuts off some of them.
I couldn't find anything about it in documentation or in here. Here are the results of my stylings: first, second third.
After unsuccessful attempts at altering CSS, I fixed it by adding a title of the chart at the top and label with opacity 0 at the bottom using charts prototypes in JS. I couldn't find any solution in documentation, but to set fixed maxHeight of the radar in pixels. The solution with pixels wouldn't work well with CSS-Grid.
fixed container
So I've run into troubles when making my web app responsive. I've managed to make it so that the SVG adapts when the width is resized, but I've run into trouble with height.
The best solution I've come up with for height resize is the following js/jQuery code:
function updateWindow(){
var y = (($(window).height()));
svgMap.style.height=y;
}
updateWindow();
window.onresize = updateWindow;
What this does is set the SVG viewport height to equal that of the window.. This works in a sense that it centers the SVG with the browser window's height. Not so excellent, it screws up on mobile devices and adds a strange top-margin almost. It also makes the SVG slightly smaller unless I multiply "y" by some value greater than one. Doing so, however, increases the margin-top esque gap. How troublesome..
You can view the demo here:
http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils.html
and the demo w/o the height center change here: http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils%20-%20Copy.html
To sum things up, How does one go about centering an SVG within an <object> tag, horizontally AND vertically. Also, I would like it so that the SVG map itself fills the wrapper container.
Any help is appreciated, thanks.
EDIT: So I've given up on trying to get it to just fit the parent's height.. Instead I just wrote some JS that will prompt the user with a warning if the height is too small that it will cause overflow of the page. I also made it so that it would be styled perfectly by adding inline CSS to each page, accompanied with media queries.
If you set the SVG's width and height to 100%, ie.:
<svg width="100%" height=="100%">...
then it should just be a matter of resizing the container that the SVG is inside. The preserveAspectRatio setting of "xMidYMid meet" should then centre it vertically.
Sorry for the title, it's a hard issue to summarise. At the moment, I have a website which looks like this:
(as you can tell, it is inspired by Metro). I have uploaded it to jsfiddle here: http://jsfiddle.net/r46bY/4/embedded/result/
The div surrounding everything (represented by a dotted border) resizes to fit the user's browser window and I want the buttons (which are simply coloured divs) to do the same but can't figure out how. At the moment, they're in place using absolute positioning and based on a particular screen size. I would like them to keep the same layout but resize along with the container div.
I've experimented with liquid values in CSS, but I can't get the positioning right.
Please help.
Use only percentages instead of pixels for your dimensions (including margins). At resize you only have to resize the surrounding div, and the content should take the right dimensions.
I am using the default example of the Kendo UI dataviz bar chart. When I zoom into the page, the graph starts to overlap over other elements on the page. Is there a way to make sure that everything in the div containing the graph does not overlap onto other divs. This is a huge problem as when viewed on a tablet, it is overlapping other elements.
How are you "zooming" in?
The KendoChart gets a fixed width when it is created - it's just an SVG. I'm not aware of a means to animate resizing it - you could change the height and width manually, or possibly just redraw the chart, but I imagine that would be fairly intensive and wouldn't animate well.
I want to place an svg precisely into the corner of a div. The svg has a dynamic generated stroke. If the shape of the svg is irregular or lets say a star, the distance to the outmost part of the border is hard to calculate.
The problem could be solved, if I would be able to get the dimensions of the svg including the stroke.
My idea is:
load the external svg
place it in the middle of the div
apply the desired stroke-width
get the outmost dimensions of the svg
place it in the corner
Can I get the width of the svg including the stroke? Any other ideas?
Thanks
getBoundingClientRect is the only way short of calculating it yourself from first principles. That method is only implemented in Firefox and IE9+ as far as I know though.
For example this returns 54 on Firefox.