Resizeable SVG elements with JavaScript and D3 - javascript

does any one know any js code that would allow the svg element (entire contents too) to be resized depending on the size of the window set by the user. my users will want to view d3 graphics in a small customized view on their active desktops. while at the same time others will have it running full screen on their active desktops. this means that the graphs will need to resize them self depending on the users preference.

I put together a demo of this desired behavior a few days ago. Check it out here - http://bl.ocks.org/4444770
Basically, you listen to the size of the window, apply a proportional transform to the g element that wraps all SVG elements, and adjust the size of the parent SVG. Call this code on pageload and on window resize, where "container" is the div holding the SVG:
d3.select("g").attr("transform", "scale(" + $("#container").width()/900 + ")");
$("svg").height($("#container").width()*0.618);
This is a good method if your SVG is placed within a div.
The other way is to use the SVG viewBox, as demonstrated by Mike Bostock here - http://bl.ocks.org/harlantwood/raw/6900108/. This method is best if you are appending the SVG to the body, and I'm sure there is a way to use this method when placing the SVG inside of a div, but I was unable to find a solution, and thus created the above work around.

You can adjust an svg.attr("width").attr("height") either on loading the page or on resizing, but you'd need additional behavior in your code to get the d3 elements to change with the new size.
You can also look into the .viewBox attribute of an svg object, which will scale the svg elements dynamically, but I've found its behavior among different browsers to be spotty:
http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

Related

HTML: Image map areas' responsiveness

I need to use image map in my website, to add different links to each part of image.
But I have problems with its responsiveness. I couldn't change map area's size while resizing window.
Can anyone help me with this? The method is not important, I can use either Js or Css.
Update:
I used http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html for responsiveness, but it affects on map area coords. When I reload the page, map coords are all 0, those are being updated only after resizing the window.
Do anyone have this problem too?
Imagemap is a very Old way to create websites I preffer using photoshop image sílice and save as html maybe you should try it ir you will use non dynamic images that way you can fix width and height and a lot more
If you have the image saved as a vector image, you could save it as an SVG and use RaphaelJS. I've only recently picked it up but it is quite easy to use once you get the hang of it.
You can assign links, style and hover events to each node attribute, and Raphael allows you to set the viewBox so that it scales on resize (can't link as rank not high enough - help can easily be found on SO though)
Here are some examples of using RaphaelJS: LINK1 LINK2
And check out jsfiddle.net/AUNwC/294/ for example of each node having a responsive clickable area (resize window to check)

How to add an SVG canvas next to a div with the same height without messing up the layout

I have a div with several divs inside. The number of internal divs can change so the height of the outer div is dynamic. Then I have another div on the right of the first whose height must always match, which I want to use as an SVG canvas. I've solved the height issue using table-row and table-cell in CSS. But when I try to add SVG to it using a library such as Raphael or D3 the layout completely breaks. I've tried several variations and fixes suggested online with no success: if the canvas div doesn't change size then the SVG doesn't fill it up properly. Please help. I struggle to understand HTML and CSS layout.
You can see the problem here: http://jsfiddle.net/ofuh701p/4/ by clicking on the button. The black should all turn into red, without any layout changes.
Here is another simpler example of the same problem: http://jsfiddle.net/88f2L4h1/ . In this case I'm using the solution from https://stackoverflow.com/a/8418039/2482744 to achieve equal height divs.
You can explicitly set your SVG element's width and height to the same values as its parent container using clientWidth and clientHeight.
Here's a fiddle demonstrating it using D3.
http://jsfiddle.net/ofuh701p/8/
Here is the kind of thing I want:
http://jsfiddle.net/ofuh701p/6/
I was hoping that this could be solved using just CSS, as this seems like a really simple requirement and I can't understand why the SVG messes things up so much. This solution uses uses javascript to set the height dynamically based on the DOM elements which feels like a hack:
var c = Raphael("braces-canvas", 50, $("#selectable-container").outerHeight());
Also the divs are now using display: inline-block.

How to scale div containing SVG?

I've got a <div> element on page with SVG in it. Sometimes during program execution the size and position of containing div changes. SVG follows the div but doesn't scale along with it, unfortunately. How can I get SVG bigger or smaller when the size of containing element changes?
I use Raphael library for SVG creation and jQuery for events and DOM manipulation.
You can use setViewBox()
http://raphaeljs.com/reference.html#Paper.setViewBox
However, if you use this for scaling there will no longer be a 1:1 unit:pixel scale.

How do I use SVG images interchangably with PNGs in Firefox?

My project supports users uploading their own icons to be used for various entities in the system. I'd like to support SVGs, as this means that the same image can be scaled nicely and thus used in multiple places.
Firefox has a current bug that prevents SVG files being used in <img> tags. It was my understanding from my other xhtml work that <object> tags were the (xhtml) way forward for external media (and essentially equivalent - enhanced fall-back functionality support aside), and as Firefox supports SVG in object tags, I switched over to using these.
However, it seems SVG's "features" prevent them being used interchangeably as scalable images as JavaScript events don't seem to bubble up out of the object, amongst a few other things.
Does anyone know if these issues can be resolved? I.e. how can I tell Firefox I just want the picture using the object tag?
The object element "encapsulates" the containing object, that is, the two DOMs are completely separated. Therefore events can't pass through from the SVG DOM to the containig HTML DOM.
However, using JavaScript and AJAX, you can just load the SVG file (since it's XML) and put it directly into the DOM (you might have to set some width/height somewhere):
Using jQuery, the code is something along this:
$.get('icon.svg', function (svg) {
$('#put_svg_here').append(svg.rootElement);
}, 'xml');
I'm not sure if this qualifies as cheating, but I've set the object tag to 'z-index: -1' and the containing div to 'position: relative' (to create a new positioning context without altering the page layout).
Into this, I've added another absolutely-positioned div with height and width set to 100%; this effectively sits above the object tag (and without going behind the container due to the positioning context), with the net result being that mouse events get captured by the overlay div and bubbled up to the container node.
The bonus div could be added by jQuery, but for simplicity's sake I've just stuck it in server-side when the page is composed.
Maybe you can use a DIV of the correct size and set background-image on it.
Edit: this does not seem to work, although I am not sure why.

Raphaël - SVG on top of HTML

I'm making a project which uses HTML elements as nodes in a diagram and uses Raphaël to draw lines between them. The problem is that the lines always wind up underneath the HTML elements. I have tried
raphael.canvas.style.zIndex = 1000;
(which is larger than all my other z-indexes) and also tried placing the SVG canvas as the last element in the DOM with no luck. How can I make these lines be drawn on top?
Have you ensured that your SVG element, and its containing element, are relatively or absolutely positioned? z-index only applies to positioned elements, not elements that have static (the default, in-flow) positioning.

Categories