Increasing d3 SVG container size

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/36650068/increasing-d3-svg-container-size