Update Size of D3 Charts Through Updated Variables

Question

First, this: Resize svg when window is resized in d3.js is not what I'm looking for.

My graph width is defined as the following few functions:

var element = document.getElementById('front'),
    style = window.getComputedStyle(element),
    divWidth = parseInt(style.getPropertyValue('width'), 10),
    divHeight = parseInt(style.getPropertyValue('height'), 10);
window.onresize = function() {
    divWidth = parseInt(style.getPropertyValue('width'), 10),
    divHeight = parseInt(style.getPropertyValue('height'), 10);
};

var margin = {top: 20, right: 40, bottom: 90, left: 40},
width = divWidth - margin.left - margin.right,
height = divHeight - margin.top - margin.bottom;

Which works perfectly when the page is generated. As you can see, the variable is dynamically updated as the screen gets shifted. What I want to know is how to update the width of the chart at the same time as the variable gets reassigned.

Link and source for the project: Cards

Plunker

An additional question after reading up some more: What is the best way to do the alternative to window.resize with a div in place of the window.

EDIT: Found a great div resize tool: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

It would be very helpful if you could provide a fiddle/plunker with a (small amount of) sample data. — Dmitriy Khudorozhkov, Jun 06 '16 at 19:50
Also, it's unclear what solution are you looking for. "What I want to know is how to update the width of the chart at the same time as the variable gets reassigned." Is your question D3-related, or do you want to fire an event after some variable gets updated (this is a pure JavaScript question)? — Dmitriy Khudorozhkov, Jun 06 '16 at 19:52
@DmitriyKhudorozhkov It's d3 related. (I'm currently making a plunker). I need to essentially redraw the graph on resize of the div. You'll see once I include the plunker — Alexey Ayzin, Jun 06 '16 at 19:58

Dmitriy Khudorozhkov · Accepted Answer · 2016-06-07T12:27:32.260

1

Using the polling technique, you can solve the issue in this way:

addResizeListener(target, function()
{
    var style = window.getComputedStyle(target);

    divWidth = parseInt(style.getPropertyValue('width'), 10);
    divHeight = parseInt(style.getPropertyValue('height'), 10);

    width = divWidth - margin.left - margin.right;
    height = divHeight - margin.top - margin.bottom;

    document.getElementById('front').innerHTML = '<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onclick="flipper(\'flipper\')"></span>';

    makeTestGraph();
    makeSliderGraph();
});

Working plunker.

edited Jun 07 '16 at 12:27

answered Jun 06 '16 at 20:10

Dmitriy Khudorozhkov

1,624
12
24

@AlexeyAyzin I can't get your Plunkr to work. I get just an empty divs, so I can't test. – Dmitriy Khudorozhkov Jun 06 '16 at 20:17
@AlexeyAyzin also, your plunkr is way to big. Any way you can cut it to just the minimal functionality? – Dmitriy Khudorozhkov Jun 06 '16 at 20:18
It's updated now in the post and here: https://plnkr.co/edit/HfnIs1PlYcXCTcdHTLHA?p=preview – Alexey Ayzin Jun 06 '16 at 20:20
@AlexeyAyzin I've edited my question with the solution; included a link to working plunker. – Dmitriy Khudorozhkov Jun 07 '16 at 12:28
What is this line: document.getElementById('front').innerHTML = ''; – Alexey Ayzin Jun 07 '16 at 15:05
@AlexeyAyzin it resets the "front" container's contents, so graph can be repainted anew. – Dmitriy Khudorozhkov Jun 07 '16 at 15:07
Any way to bypass this? – Alexey Ayzin Jun 07 '16 at 15:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/114048/discussion-between-alexey-ayzin-and-dmitriy-khudorozhkov). – Alexey Ayzin Jun 07 '16 at 15:18
@AlexeyAyzin this is the easiest way to repaint the graph. If you're concerned that graph repainting is slow - it is because of CSV reading, not because of painting code. – Dmitriy Khudorozhkov Jun 07 '16 at 15:19

SulZ · Answer 2 · 2016-06-06T20:20:05.453

0

I believe that what you're trying to do can be solved with the preserveAspectRatio attribute and a wrapper div. Here is a blog post on the subject

When initializing your svg element, simply set the viewBox and perserveAspectRatio attributes. The element will then become responsive in relation to its immediate parent.

 <svg id="chart" width="600" height="200"
   viewBox="<LEFT> <TOP> <WIDTH> <HEIGHT>"
   perserveAspectRatio="xMinYMid[none/etc]">

Depending on your need, you may want to use a different scaling rule.

A JSFiddle credit to Shawn Allen, the author of this snippet.

edited Jun 06 '16 at 20:20

answered Jun 06 '16 at 20:04

SulZ

69
5

Might wanna comment this or at least include some code and details – Alexey Ayzin Jun 06 '16 at 20:06
@AlexeyAyzin the 1st answer in the topic you linked is about this very attribute: http://stackoverflow.com/a/25978286/2431110 – Dmitriy Khudorozhkov Jun 06 '16 at 20:11
@DmitriyKhudorozhkov The thing with that is the following: It changes on the window resize, I need it to happen on the div resize – Alexey Ayzin Jun 06 '16 at 20:12

Update Size of D3 Charts Through Updated Variables

2 Answers2