I am trying to increase the size of my SVG container dynamically so that it fits all the data. There is a fiddle which explains the dynamic increase of the SVG: http://jsfiddle.net/CKW5q/
However, the same concept doesn't work for a bi-directional sankey chart(d3). Following is the function called to expand the parentnode:
function expand(node) {
node.state = "expanded";
node.children.forEach(function (child) {
child.state = "collapsed";
child._parent = this;
child.parent = null;
containChildren(child);
}, node);
HEIGHT = HEIGHT + node.children.length * 10; //update height by 10px per child
WIDTH = WIDTH + node.children.length * 10;//update width
}
svg.attr("height", HEIGHT); // update svg height
This gives very odd results. It definitely increases the container, but unfortunately keeps the original SVG dimensions intact:
I suppose that the SVG HEIGHT and WIDTH being declared at the start of the script needs to be updated, which for some reasons am not able to. Any help will be appreciated.
You will need to do something like this:
var Chart = (function(window, d3) {
(init code that doesn't change on resize here)
render();
function render() {
updateDimensions();
(code that needs to be re-rendered on resize here)
}
function updateDimensions() {
margin = {top: 100, right: 40, bottom: 80, left: 80}; // example
width = window.innerWidth - margin.left - margin.right;
height = window.innerHeight - margin.top - margin.bottom;
}
return {
render: render
}
})(window, d3);
window.addEventListener('resize', Chart.render);
Related
I am working on a Fabric Grid using Fabric.js and I want to add the dimensions of the shape that is added on the canvas. The new Width and Height is defined but I will need to not only show the dimensions on the screen, but also get it updated when I resize the shape.
Below is the JS function, where newWidth and newHeight are defined:
function snapToGrid() {
let checkBox = document.getElementById("myCheck");
if (checkBox.checked == true) {
//snap only to the grid
const gridSize = 50;
c.on("object:moving", function (options) {
options.target.set({
left: Math.round(options.target.left / gridSize) * gridSize,
top: Math.round(options.target.top / gridSize) * gridSize,
});
});
c.on("object:modified", function (options) {
var newWidth =
Math.round(options.target.getWidth() / gridSize) * gridSize;
var newHeight =
Math.round(options.target.getHeight() / gridSize) * gridSize;
options.target.set({
width: newWidth,
height: newHeight,
scaleX: 1,
scaleY: 1,
});
});
} else {
c.off("object:modified");
c.off("object:moving");
}
}
I am new to Fabric.js and would appreciate if someone helped me on this. Please let me know if I'' have to share more details of the code.
Okay so I've answered my own question, so if anyone needs it, here's the below code that would help to dynamically show your shape's width and height while altered.
function onObjectScaled(e){
var scaledObject = e.target;
var text = document.getElementById("text");
text.value = 'Width = '+scaledObject.getWidth() + ' Height = '+scaledObject.getHeight();
}
I'm trying to use a settings icon svg file which will scale depending on then window width. I've tried to do this by creating a function in JavaScript that changes the element's width and height based on the window size but this doesn't work. (Btw i'm testing it with a width of 360 pixels but the svg's size is about 300 pixels).
The HTML:
<img id="settings-icon" class="icon" src="images/icons/settings-icon.svg" onclick="settingsPage();" alt="Settings" />
The JavaScript:
var settings_icon = scaleIcon(dcument.getElementById("settings-icon"));
scaleIcon(settings_icon);
function scaleIcon(icon) {
var w = window.innerWidth;
var h = window.innerHeight;
if (w <= 360) {
icon.width = "44";
icon.height="44";
}
else if (w <= 400) {
icon.width = "48";
icon.height="48";
}
else if (w <= 440) {
icon.width = "52";
icon.height="52";
}
}
I think you spelt 'document' as 'dcument'. Also, try using icon.style.width and icon.style.height. Also, remember to add the units for your measurements. Example: icon.style.width = "44vw";
I have a fabric rectangle and I want to change width & height manually. The problem is the next: When I first resize rect with scaling it makes resize as expected, but when after this I try to change the values in my inputs - the rectangle rerenders with wrong dimensions, but the width & height values in javascript object correct.
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<canvas id="draw"></canvas>
width:<input type="number" id="w" value="50">
var w = document.getElementById('w');
var c = new fabric.Canvas('draw');
var rect = new fabric.Rect({
top: 50,
left: 50,
width: parseInt(w.value),
height: parseInt(h.value),
fill: 'lightblue',
type: 'rect'
});
c.add(rect);
c.renderAll();
c.on('object:scaling', function(e) {
var width = parseInt(e.target.width * e.target.scaleX);
w.value = width;
});
w.addEventListener('change', function(e) {
rect.set('width', parseInt(e.target.value));
rect.setCoords();
c.requestRenderAll();
});
screenshot
jsfiddle
Found a solution, maybe this will help someone. When we listen for a change of width/height, we also should take into account the current scale value.
w.addEventListener('change', (e) => {
const scale = rect.getObjectScaling();
rect.set('width', parseInt(e.target.value) / scale.scaleX);
rect.setCoords();
rect.requestRenderAll();
});
I need to adapt the width of a textarea (='#overlay') to its content. The minimum width should be 100px:
'input #overlay': function(e) {
var overlay = $('#overlay'),
element = document.getElementById('overlay'),
pos = overlay.position(),
width = 100;
if (element.scrollWidth > element.clientWidth) {
var diff = Math.ceil((element.scrollWidth - element.clientWidth)/20)*20,
left = pos.left - (diff/2);
width = element.scrollWidth + diff;
overlay.css({left: left, width: width});
}
This code works to expand the textarea if there is a long line. But it can't be used to make it smaller if you delete some characters of the line.
You have to set the minimum value before the if-part:
overlay.css({ width: 100 });
Then the height will always be adapted to the needed height.
I have a little problem with window resizing using jQuery's function .resize(). I would like to know which dimension is getting bigger/smaller - width or height. I need this because if I just put two conditions - if width is for 50px bigger than div and if height is for 50px bigger than div,
// (pseudocode)
if width = div.width + 50px
width = something
if height = div.height + 50px
height = something
then is working on just one condition and I can resize only width or height.
How could I know which dimension is changing in size or if both are?
By saving last window size values in variables.
var h = $(window).height(), w = $(window).width();
$(window).resize(function(){
var nh = $(window).height(), nw = $(window).width();
// compare the corresponding variables.
h = nh; w = nw; // update h and w;
});
Save the previous size and compare with it, everytime the size changes.
For ex:
var prevW = -1, prevH = -1;
$(document).ready(function() {
// ... other stuff you might have inside .ready()
prevW = $(window).width();
prevH = $(window).height();
});
$(window).resize(function() {
var widthChanged = false, heightChanged = false;
if($(window).width() != prevW) {
widthChanged = true;
}
if($(window).height() != prevH) {
heightChanged = true;
}
// your stuff
prevW = $(window).width();
prevH = $(window).height();
});
Demo: http://jsfiddle.net/44aNW/