使用视图框调整SVG D3日历大小 - 使其看起来很漂亮

I'm having trouble to get this to look nice when resizing. I'm sure there is some logic between the parent/child sizes and aspect I'm not understanding. If anyone could give me some pointers it would be much appreciated.

调整大小时,我很难让它看起来很漂亮。我确定父/子大小与我不理解的方面之间存在某种逻辑关系。如果有人能给我一些指示,我将不胜感激。

$(window).resize(function () {

    // Debounce our resizing
    var debounce = setTimeout(function() {

        // Only set attribute viewbox once   
        function setView(c, w, h) {
            if (!c.getAttribute("viewBox")) {
                var viewBox = "20 0 " + w + " " + h + "";
                c.setAttribute("viewBox", viewBox);
                c.setAttribute("preserveAspectRatio", "xMidYMid meet");
            }
        }

        // Reset previous timers
        clearTimeout(reset);
        clearTimeout(debounce);

        // Set variables
        var cal = d3.select("svg.RdYlGn")[0][0],
        parent = cal.parentElement,
        aspect = Math.round(parent.offsetWidth / parent.offsetHeight);
        var newHeight = (parent.offsetWidth / aspect),
            newWidth = parent.offsetWidth,
            oldHeight = cal.getAttribute("height") || cal.offsetHeight,
            oldWidth = cal.getAttribute("width") || cal.offsetWidth;

        // Set the viewbox
        setView(cal,oldWidth,oldHeight);

        // Set new dimensions for calendar
        cal.setAttribute("height", newWidth / aspect);
        cal.setAttribute("width", newWidth);

        // Make sure parent <div> behaves and follows with calendar                            
        var reset = setTimeout(function() {
            parent.setAttribute("width", cal.getAttribute("width"));
            parent.setAttribute("height", cal.getAttribute("width")/aspect);
            }, 500);
        }, 300);

    });

1 个解决方案

#1

Instead of sweating over viewBox and preserveAspectRatio on $(window).resize just fetch the parent height and width dynamically each time the window is resized:

而不是在$(window).resize上对viewBox和preserveAspectRatio出汗,只需在每次调整窗口大小时动态获取父高度和宽度:

 var containerWidth = $("#yourChartId").parent().width(); // gets immediate parent width
 var containerheight = $("#yourChartId").parent().height();// gets immediate parent height
 var margin = {top: 15, right: 15, bottom: 20, left: 40},
 width = containerWidth- margin.left - margin.right,
 height = containerheight - margin.top - margin.bottom;