Develop Reference

How to use preserveAspectRatio on SVG <symbol> using SVG.JS

I recently found out about using 'preserveAspectRatio' on symbols in SVGs, which I will be honest was a gamechanger for they type of designs I have been trying to accomplish. However, I can't seem to get it to work using SVG.JS.
Link to JS Fiddle
/* canvas created */
var draw = SVG('maindiv').viewbox('0 0 500 500').attr({ 'preserveAspectRatio': 'none' })
/* polgon created */
var polyg = draw.polygon('0,150 500,150 500,500 0,500').fill('black')
/* symbol created and inserted, with functioning viewbox but preserveAspect ratio not working */
var txt = draw.symbol().viewbox('0 0 500 500').attr({ 'preserveAspectRatio': 'xMinYMin meet' })
txt.text('Some Text').font({family: 'Arial',weight: 'bold',size: 30,fill: '#f06'})
var title = draw.use(txt)
/* clickable animation */
polyg.click(function() {
this.animate().attr({'points':'0,350 500,350 500,500 0,500'})
})
If you take a look at that code in the link, the black polygon correctly extends the entire viewport, but the text which is in fact a symbol, should NOT scale with the viewport. Go ahead and resize your window and you will see that the text resizes itself.
Any ideas? There's a lack of documentation on how to do this using SVG.JS so I'm sure this will help a few people out there who are trying to acheive this same challenge of having multiple elements in the same SVG canvas, some responsive to the viewport and some static.

D3 v5 Zoom Stutter

I am trying to use d3.zoom but there are some issues that I am facing. Below is the simple code that I am using.
var treeGroup = d3.select('.treeGroup'); //parent g element
treeGroup.call(d3.zoom().on('zoom', function() {
console.log(d3.event.transform);
treeGroup.attr('transform', d3.event.transform);
}));
JS Fiddle: https://jsfiddle.net/nohe76yd/9/
Below are the issues that I am facing. (Please refer above JS Fiddle for code)
I can not zoom or pan on tree unless I do it on nodes, text labels or links hence I can not zoom on parent g object.
There is a stutter when I try to pan by clicking and dragging on nodes, text labels or links
When I zoom out an try to pan than tree disappears means there is too much translate.
If you have any idea why d3.zoom is behaving like this, please help me with the solution.

Taken from https://stackoverflow.com/a/20072986/6060606 and adapted to this question:
var rootSVG = d3.select('.rootSVG');
var treeGroup = d3.select('.treeGroup');
rootSVG.call(d3.zoom().on('zoom', function() {
treeGroup.attr('transform', d3.event.transform);
}));
This fixes the jitter and makes the entire SVG "draggable". The excellent explanation as to why this works can be found in the linked SO answer.

Apply zoom in center of the canvas

I need to apply zoom to the javascript canvas which I have badly accomplished by using the following line of code:
ctx.scale(2,2) //doubles everything's size
Instead of zooming, its obviously doubling the size of the canvas and all of its elements. I'd be okay with this if I got it working like the image below shows:
Any ideas on how I could accomplish what is depicted in the picture above? I'm not using any external libraries hence making this so difficult. Thanks.

You can translate the context by half the canvas size using ctx.translate()
EDIT :
var zoomfactor = 2; //set whatever you want as zoom factor
ctx.transform(zoomfactor,0,0,zoomfactor,-(zoomfactor-1)*canvas.width/2,-(zoomfactor-1)*canvas.height/2)

Is there any Draw2d.js canvas destroy method?

I have a question about Draw2D.js. I'm resizing the Canvas by using JQuery-ui, but when I resize the canvas I have to destroy it and create a new one ... Otherwise I'll have many canvases overlapping. If I call canvas.destroy() nothing works (as mentioned in the documentation).
There is any way to do a soft destroy of the canvas? Is any resize fuunctionaility in JQuery-ui?
Thank you #MacGyver, i find solution in the second propostion. We have
to edit the SVG DOM :)
i share my solution here jsfiddle!
it may helps!

You should be able to dynamically change your DOM node of your canvas, by setting the width and height manually. Here, we have a width of 2500px and a height of 2500px.
<div onselectstart="javascript:/*IE8 hack*/return false" id="draw2d" style="width:2500px; height:2500px;-webkit-tap-highlight-color: rgba(0,0,0,0);"></div>
canvas.setScrollArea("draw2d");
Or change the width and height of the DIV tag dynamically using JavaScript.
Another alternative is to set the zoom dynamically:
canvas.setZoom(1); // default 1x (1:1 zoom)
canvas.setZoom(.5); // .5x (1:2 zoom)
canvas.setZoom(2); // 2x (2:1 zoom)
Then call the app.layout() function
Reference:
http://draw2d.org/draw2d_touch/jsdoc/#!/api/draw2d.Canvas

dygraph vertical line

Is there a way to make a vertical line in the js graph library dygraph?
I am loading data and would like to put vertical lines like graphite does to show events
is there some special context to add vertical lines

You've probably figured this out by now, or stopped caring, but the way to do this is with a custom underlay (see http://dygraphs.com/tests/highlighted-region.html and http://dygraphs.com/tests/underlay-callback.html for examples). You provide an underlayCallback function when creating the graph, and it gets called with the canvas element, area (which helps with coordinate math), and a reference to the Dygraph object.

Here is a simple solution.
Use the crosshair demo (http://dygraphs.com/tests/crosshair.html) on the Dygraph site.
Once you disable the horizontal bar on the crosshair sample, you are getting a vertical bar.

g4.updateOptions({ pointClickCallback: function(event, p) {
var div_vertical_style="top:0px;left:"+g4.toDomCoords(p.xval,-20)[0]+"px;width:1px;height:"+g4.plotter_.area.h+";background-color:black;position:absolute;";
$("#graphdiv4").append("<div style="+div_vertical_style+"></div>")
}});
//my idea , add div .....