javascript - D3.js積み上げ面グラフのサイズ変更の問題

Question

d3.js を使用した積み上げ面グラフがあります。window.resize でビジュアライゼーションのサイズを変更して再描画する関数があります。ロジックは、10% のマージンを削除し、ウィンドウ サイズに応じて x/y 軸をスケーリングすることです。

ここで見ることができます：

http://porwal.info/direct/demos/d3graphs/area.html

ウィンドウのサイズがフルサイズに近くない場合、ウィンドウのサイズを変更 (ズームインまたはズームアウト) すると、ロジックが機能します。高さが完全に近い場合、グラフは予想される境界を超えています。たとえば、F11 キーを押して全画面表示にすると、グラフがオーバーフローします。F11だけではありませんが、最大化すると、正常に動作する場合とオーバーフローする場合があります。

関連するjsファイルは

http://porwal.info/direct/demos/d3graphs/js/area.js

また、関連するサイズ変更機能:

function setACDimensions() {
    ac_container_width=$(window).innerWidth();
    ac_container_height=Math.round(0.8*$(window).innerHeight());

    $(ac_container).height(ac_container_height);
    $(ac_container).width(ac_container_width);

    var margin=(ac_margin > 10)? 10 : ac_margin;
    var factor= 1 - 2*margin/100;

    ac_width = Math.round(factor*ac_container_width);
    ac_height = Math.round(factor*ac_container_height);

    ac_origin_x=Math.round(ac_container_width * margin/100);
    ac_origin_y=Math.round(ac_container_height * margin/100);
}

function resizeAreaGraph() {
    setACDimensions();
    area_vis.attr("width", ac_width)
        .attr("height", ac_height)
        .attr("transform", "translate(" + ac_origin_x + "," + ac_origin_y + ")");
    redrawAreaGraph();
};


function redrawAreaGraph() {
    if(!area_graph_exists) { 
        initAreaGraph(); 
    } else { 
        bindAreaData(); 
    }

    if(area_graph_exists) {
        area_paths.data(area_stack);

        area_paths.select("path")
            .transition()
            .attr("d", function(d) { return area_fn(d.values); });


        area_paths.select("text")
            .datum(function(d) { return { name: d.name, value: d.values[d.values.length - 1]}; })
            .attr("transform", function(d) { 
                    return "translate(" + xx(d.value.year) + "," + yy(d.value.y0 + d.value.y / 2) + ")"; 
                    })
        .text(function(d) { return d.name; });

        area_vis.select("g .x_axis")
            .attr("transform", "translate(0," + ac_height + ")")
            .call(xAxis);
        area_vis.select("g .y_axis").call(yAxis);
    }
}

(完全なコードは、上記のリンクを提供した js ファイルで確認できます)。