Increasing d3 SVG container size

Question

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.

Are you talking about having the svg container fit on window resize? So being responsive? — timolawl, Apr 15 '16 at 14:43
Yes, its should be responsive. It should take the updated height and resize itself. Its interesting to see that the canvas updates its height, but when it comes to the actual svg, it doesn't: If you see on line 32, 33 or the bl.ocks.org site for d3 bidirection sankey chart in the script.js, you will see: HEIGHT = 500 - MARGIN.TOP - MARGIN.BOTTOM, WIDTH = 960 - MARGIN.LEFT - MARGIN.RIGHT, This height and width needs to be updated. But its not. Its maybe because the update() function is running only once with the preset height and width. How can we change this? Thanks a lot. — Omkar, Apr 15 '16 at 14:46

timolawl · Accepted Answer · 2016-04-15T15:00:15.720

3

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);

edited Apr 15 '16 at 15:00

answered Apr 15 '16 at 14:55

timolawl

5,434
13
29

Thanks timolawl, I will try and get back. Much help appreciated. – Omkar Apr 15 '16 at 14:58
Forgot to include `updateDimensions();` to the beginning of the render function. Just added it. – timolawl Apr 15 '16 at 15:01
Sure thing! Be sure to accept the answer if it solves your problem. – timolawl Apr 15 '16 at 15:02
1

it was my mistake that i didnt specify all the details of the diagram. This was pretty much simple. In all the d3 examples given by bl.ocks.org, the svg is just another variable to which 'g' element is appended. The svg can be anything, it maybe named as container also. When i did d3.selectAll("svg") on click event, it selected the actual svg and changed its dimensions. It worked. Either wise, your answer helped too. – Omkar Apr 17 '16 at 14:01

Increasing d3 SVG container size

1 Answers1

Linked