Javascript D3平移和缩放图表

我无法添加平移和缩放D3.js图表的功能。我尝试过多种方法，但似乎无法解决

理论上，当用户滚动或使用鼠标在图形块之间拖动时，我希望使用缩放效果。当用户拖动到这些区域之外时，使用平移效果

有关于如何做到这一点的想法或例子吗？下面是我现在所在位置的一些代码

谢谢

    addPanAndZoom: function(chart, chartType, chartMargin, numXLabels, svg, redraw) {
        // graph dom elements
        var rect = svg.select('rect'),
            paths = svg.select('path');

        // Chart dimensions
        var width = Number(rect.attr("width")),
            height = Number(rect.attr("height"));

        var xDomain = chart.xDomain;

        var numXTicks = numXLabels - 1,
            numYTicks = 10;

        var scaleExtent = 10;

        var x = d3.scale.linear().rangeRound([0, width]).domain([0, numXTicks]),
            y = d3.scale.linear().rangeRound([0, height]).domain([height, 0]);

        var make_x_axis = function () {
            return d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .tickValues(numXTicks);
        };

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickValues(numXTicks);

        var make_y_axis = function () {
            return d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickValues(numYTicks);
        };

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .tickValues(numYTicks);

        var zoom = d3.behavior.zoom()
            .x(x)
            .y(y)
            .scaleExtent([1, scaleExtent])
            .on("zoom", zoomed);

        svg.call(zoom);

        function zoomed() {
            console.log('zoomed');

            var translate = zoom.translate(),
                scale = zoom.scale();

            var xTranslate = translate[0],
                yTranslate = translate[1];

            // set min and max axis values
            var totalWidth = width * scale;

            var min = Math.max(0, numXTicks * (xTranslate / totalWidth)),
                max = Math.min(numXTicks, numXTicks * ((-xTranslate + width) / totalWidth));

            // minor tweak -- snap min/max to end if close enough
            if (min / numXTicks < 0.05) min = 0;
            if (max / numXTicks > 0.95) max = numXTicks;

            // set the domain for the x axis
            xDomain([min, max]);

            // redraw chart
            redraw();
        }
    }

addPanAndZoom:函数（图表、图表类型、图表边距、numXLabels、svg、重画）{
//图dom元素
var rect=svg.select（'rect'），
path=svg.select（'path'）；
//图表尺寸
变量宽度=数字（矩形属性（“宽度”），
高度=数字（矩形属性（“高度”）；
var xDomain=chart.xDomain；
var numxsticks=numxslabels-1，
numYTicks=10；
var scaleExtent=10；
var x=d3.scale.linear（）.rangeRound（[0，width]）.domain（[0，numXTicks]），
y=d3.scale.linear（）.rangeRound（[0，高度]）.domain（[height，0]）；
变量make_x_轴=函数（）{
返回d3.svg.axis（）
.比例（x）
.orient（“底部”）
.tick值（numxsticks）；
};
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.tick值（numxsticks）；
变量make_y_轴=函数（）{
返回d3.svg.axis（）
.比例（y）
.东方（“左”）
.tick值（numYTicks）；
};
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.tick值（numYTicks）；
var zoom=d3.behavior.zoom（）
.x（x）
.y（y）
.scaleExtent（[1，scaleExtent]）
。打开（“缩放”，缩放）；
调用（缩放）；
函数缩放（）{
console.log（'zoomed'）；
var translate=zoom.translate（），
scale=zoom.scale（）；
var xTranslate=translate[0]，
yTranslate=翻译[1]；
//设置最小和最大轴值
var totalWidth=宽度*刻度；
var min=Math.max（0，numXTicks*（xTranslate/totalWidth）），
最大值=数学最小值（numXTicks，numXTicks*（-xTranslate+width）/totalWidth）；
//小调整——如果足够近，则将最小值/最大值捕捉到终点
如果（min/numXTicks<0.05）min=0；
如果（max/numXTicks>0.95）max=numXTicks；
//设置x轴的域
xDomain（[min，max]）；
//重画图表
重画（）；
}
}