如何使用d3.js扭曲svg，使其保留在视口中？

我附加了一个矩形作为svg，并对其应用了倾斜变换。问题是，当我拖动以倾斜矩形时，它正在视口外移动。如何应用倾斜变换以使矩形保留在视口内，或者如何在其位置倾斜矩形以使其保留在视口内？以下是我现在的正常运行时间：

var width = 550, height = 400;

            var sketchSVG = d3.select("#sketch4").append("svg")
                .attr("width", width)
                .attr("height", height)
                .call(d3.drag().on('drag', dragged))
                .append("g");

            var rectangle = sketchSVG.append("rect")
                            .attr("x", 100)
                            .attr("y", 100)
                            .attr("width", 200)
                            .attr("height", 150)
                            .attr("fill", "green");

            function dragged() {
                sketchSVG.attr("transform","skewX("+d3.event.x+")" );
                metricSVG.attr("transform","skewX("+d3.event.x+")" );
            };