D3条形图放大

Question

我正在尝试使用d3.js在svg分组的条形图上添加缩放功能。图形已开始缩放，但超出了图形区域。另外，它不能放大axis属性。任何人都可以提出修复建议吗？

代码/ HTML复制问题：https://jsfiddle.net/47L61oq8/

要缩放的JavaScript代码：

var x = d3.select("svg defs clipPath rect").attr("x");
        var y = d3.select("svg defs clipPath rect").attr("y");
        var width = d3.select("svg defs clipPath rect").attr("width");
        var height = d3.select("svg defs clipPath rect").attr("height");

        var svg = d3.select("svg");
        var zoom = d3.zoom()
            .scaleExtent([1, Infinity])
            .translateExtent([
                [x, y],
                [width, height]
            ])
            .extent([
                [x, y],
                [width, height]
            ])
            .on("zoom", zoom);

        svg.call(zoom);

        function zoom() {

            var rects = d3.selectAll("svg g rect");

            var xAxis = d3.selectAll("svg g.x-axis");
            var yAxis = d3.selectAll("svg g.y-axis");

            var t = d3.event.transform;
            rects.attr("transform", t);

            xAxis.attr("transform", d3.zoomIdentity.translate(t.x, height).scale(t.k));
            xAxis.selectAll("text")
                .attr("transform", d3.zoomIdentity.scale(1 / t.k));
            xAxis.selectAll("line")
                .attr("transform", d3.zoomIdentity.scale(1 / t.k));

            yAxis.attr("transform", d3.zoomIdentity.translate(0, t.y).scale(t.k));
            yAxis.selectAll("text")
                .attr("transform", d3.zoomIdentity.scale(1 / t.k));
            yAxis.selectAll("line")
                .attr("transform", d3.zoomIdentity.scale(1 / t.k));

        }