如何使用d3.js使svg偏斜以使其保留在视口中？

Question

我附加了一个矩形作为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+")" );
            };