增加 d3 SVG 容器大小

我正在尝试动态增加 SVG 容器的大小，以便它适合所有数据。有一个小提琴解释了 SVG 的动态增加：http://jsfiddle.net/CKW5q/ http://jsfiddle.net/CKW5q/

然而，相同的概念不适用于双向桑基图（d3）。以下是扩展父节点所调用的函数：

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

这给出了非常奇怪的结果。它确实增加了容器，但不幸的是保持了原始 SVG 尺寸不变：

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.

你需要做这样的事情：

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