Jquery D3中的缩放功能无法正常工作

我正在尝试在散点图中实现缩放和平移功能。在阅读了大量关于d3中缩放和平移的文章后，我终于能够做到这一点

平移效果很好，唯一的问题是缩放。这是第一次，即使是缩放效果也很好，但是当我玩它的时候，它就不能正常工作了

我注意到的唯一模式是，当我在右边从上到下移动，在左边从下到上移动时，我在第一次之后肯定会出错

这是我的密码-

function buildScatterXY(data,chartData){

var div = 'chart1';
var fun = "drillWithinchart(this.id,\""+div+"\")";
var columns = ['State','Store','Brand'];
var measureArray = ['Gross Sales','Gross Margin Amount','Gross Margin Amount'];
var width = 1000;
var height = 300;
var drillShade = 'red';
var color = ['blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue'];
var colIds;
var colName;
var dashletid;
var count = 0;
var colorCount = 0
var columnsVar = columns;
var fromoneview = 'false'
var colorGroup = {};
var div1 = 'chart1';
var divId='chart1';

    var mdata = [];
    var keys = [];
    var tempKeys1=[];
    var max;
    var colName = chartData[div]["viewBys"];
    var measure1 = measureArray[0];


//    var numberOfColumns = keys.length;

    var absoluteValue = chartData[div]["absoluteValue"];
    if(typeof absoluteValue !=="undefined" && absoluteValue==="Yes"){
        data = getAbsoluteValue(data,columns,measureArray);
    }  // end for negtive data

//    var chartData = JSON.parse(parent.$("#chartData").val());
    if(measureArray.length<2){
        measureArray[1]= measureArray[0];
    }
    if(measureArray.length<3){
        measureArray[2]= measureArray[1];
    }
    var dashletid;
    var colName;
    var colIds;

    if(fromoneview!='null'&& fromoneview=='true'){

        dashletid=div;
        div=div1
        colIds=chartData[div1]["viewIds"];
        colName=chartData[div]["viewBys"];
    }else{
        colIds = chartData[div]["viewIds"];
        colName=chartData[div]["viewBys"];

    }
//    var colIds = chartData["chart1"]["viewIds"];
    var chartDetails = chartData["chart1"];
    if(typeof chartDetails["rounding"]!=="undefined"){
        yAxisRounding=chartDetails["rounding"];
    }else{
        yAxisRounding=1;
    }
    if(typeof chartDetails["yAxisFormat"]!=="undefined"){
        yAxisFormat=chartDetails["yAxisFormat"];
    }else{
        yAxisFormat="";
    }
    var margin = {
        top: 35,
        right: 10,
        bottom: 40,
        left: 80
    },
    width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom;

    var xValue = function(d){ 
        return d[measureArray[1]]; 
    },
    x = d3.scale.linear()
    .range([0, width*.98]),
    xMap = function(d,i) { 
        return x(xValue(d));
    },
    make_x_axis = function() {
        return d3.svg.gridaxis()
        .scale(x)
        .orient("bottom")
        },

    xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(function(d) {

        return d;

    });

    var yValue = function(d){
        return d[measureArray[0]];
    },
    y = d3.scale.linear()
    .range([height*.98, 0]),
    yMap = function(d,i){
        return y(yValue(d));
    },
    make_y_axis = function() {
        return d3.svg.gridaxis()
        .scale(y)
        .orient("left")
    },
    yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(function(d) {
        //        if(typeof displayY !=="undefined" && displayY =="Yes"){
        //            if(yAxisFormat==""){
        return d;

    });

    var zValue = function(d){ 
        return d[measureArray[2]];
    },
    zScale = d3.scale.linear()
    .range([height*.98, 0]),
    zMap = function(d) {
        return zScale(zValue(d));
    };

   var color = d3.scale.category10();

var svg = d3.select("body") .append("svg")
            .attr("id", "svg_" + div)
            .attr("viewBox", "0 0 "+(width + margin.left + margin.right)+" "+(height + margin.top + margin.bottom+ 17.5 )+" ")
            .classed("svg-content-responsive", true)
  .append("g")
    .attr("transform", "translate(" + (margin.left*.7) + "," + (margin.top+3) + ")");

var tooltip = d3.select("#"+divId).append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

  data.forEach(function(d) {
      d[measureArray[2]] = +d[measureArray[2]]
    d[measureArray[1]] = +d[measureArray[1]];
    d[measureArray[0]] = +d[measureArray[0]];
  });

    x.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
    y.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
//  }

  if(typeof chartData[divId]["displayX"]!="undefined" && chartData[divId]["displayX"]!="" && chartData[divId]["displayX"]!="Yes"){}else{
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text(measureArray[1]);
}
  // y-axis
  if(typeof chartData[divId]["displayY"]!="undefined" && chartData[divId]["displayY"]!="" && chartData[divId]["displayY"]!="Yes"){}else{
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text(measureArray[0]);
}
    var max = maximumValue(data, measureArray[2]);
    var min = minimumValue(data, measureArray[2]);
    var temp = {};

    temp["min"] = min;
    temp["max"] = max; 
    svg.selectAll(".circle")
      .data(data)
    .enter().append("circle")

      .attr("index_value", function(d, i) {
                return "index-" + d[columns[1]].replace(/[^a-zA-Z0-9]/g, '', 'gi');
            })
            .attr("class", function(d, i) {
                return "bars-Bubble-index-" + d[columns[1]].replace(/[^a-zA-Z0-9]/g, '', 'gi')+div;
            })
    .attr("r", function(d,i){

//        var scale = d3.scale.linear().domain([temp["max"], temp["min"]]).range(["38", "12"]);
//        var radius = scale(data[i][measureArray[2]]);
        return 6;
    })
    .attr("cx", xMap)
    .attr("cy", yMap)
    .attr("opacity",".6")
            .attr("fill", 'red')


    .attr("id",function(d,i) {
        return d[columns[0]]+":"+d[columns[1]];
    })

    .attr("onclick", fun);



            function maximumValue(data, measure) {
    var max;
    for (var j = 0; j < data.length; j++) {

        if (j === 0) {
            max = data[j][measure];
        } else {
            if (max < parseFloat(data[j][measure])) {
                max = data[j][measure];
            }
        }
    }
    return max;
}

function minimumValue(data, measure) {
    var min;
    try {
        for (var k = 0; k < data.length; k++) {
            if (k === 0) {
                min = data[k][measure];
            } else {
                if (min > parseFloat(data[k][measure])) {
                    min = data[k][measure];
                }
            }
        }
    } catch (e) {
    }
    return min;
}
}

函数buildScatterXY（数据、图表数据）{
var div='图表1'；
var fun=“drillWithinchart（this.id，\”“+div+”\”）；
var列=['State'，'Store'，'Brand']；
var measureArray=[“销售总额”、“毛利率金额”、“毛利率金额]；
var宽度=1000；
var高度=300；
var drillShade=‘红色’；
var color=[“蓝”、“蓝”、“蓝”、“蓝”、“蓝”、“蓝”、“蓝”、“蓝”、“蓝”、“蓝”、“蓝”、“蓝”]；
大肠杆菌变种；
var-colName；
dashletid变量；
var计数=0；
var colorCount=0
var columnsVar=列；
var fromoneview='false'
var colorGroup={}；
var div1='图表1'；
var divId='chart1'；
var mdata=[]；
var键=[]；
var tempKeys1=[]；
var-max；
var colName=chartData[div][“viewBys”]；
var measure1=被测方雷[0]；
//var numberOfColumns=keys.length；
var absoluteValue=图表数据[div][“absoluteValue”]；
if（绝对值的类型！=“未定义”&&absoluteValue==“是”）{
数据=getAbsoluteValue（数据、列、测量数据）；
}//负数据结束
//var chartData=JSON.parse（parent.$（“#chartData”）.val（）；
如果（测量长度）