Javascript 根据D3.js中的视口标志删除多个数据

我有一个地图，我在那里检查视口的缩放和平移，以便显示信息。就我而言，世界各地/德国各地/叙利亚各地的圈子都在拉屎

主要部分如下所示，我正在检查地图的哪一部分被看到，以及缩放级别如何

var minZoomTresholdCountry = 15
var minXG = -462,
    maxXG = -552
    minYG = -29,
    maxYG = -98;

var minXS = -647,
    maxXS = -544,
    minYS = -104,
    maxYS = -164;

var zoomCheck = 0, //zoomcheck which zoom level? Which country is focussed //0 = WORLD 1 = GER 2 = SYR
    filterCheck = 1; //how is POI diplayed? Per day or over TIME? 0 per day 1 over Time

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .html(function(d) { return d.properties.description })
  .offset([0, 3]);
svg.call(tip)

function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  sites.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  var translate = zoom.translate();
  var translateX = translate[0]/zoom.scale();
  var translateY = translate[1]/zoom.scale();
  // console.log(translate[0]/zoom.scale() + "   " + translate[1]/zoom.scale());
  // console.log(zoom.scale());

  if (zoom.scale()<minZoomTresholdCountry) {
    //console.log("WELT");
    zoomCheck = 0;
    // if( siteDataG ){
    //   siteDateG.remove();
    // }
    // if(siteDataS){
    //   siteDataS.remove();
    // }
  }
  else if(zoom.scale() >= minZoomTresholdCountry
    && translateX< minXG && translateX > maxXG
    && translateY<minYG && translateY>maxYG){
      //console.log("DE");
      zoomCheck = 1;
  }
  else if(zoom.scale() >= minZoomTresholdCountry
    && translateX> minXS && translateX < maxXS
    && translateY<minYS && translateY>maxYS){
      //console.log("SYR");
      zoomCheck = 2;
  }
  else{
    zoomCheck = 0;
  }
  //console.log(zoomCheck)



  if(zoomCheck == 0){
    showSmth();
  }
}

d3.json("data/vorfaelle.json", function(error, data){
    window.site_dataG = data;
});
d3.json("data/syria_sorted.json", function(error, data){
    window.site_dataS = data;
});

d3.json("data/newtest.json", function(error, data){
    window.site_dataW = data;
});

d3.json("data/isil.en.json", function(error, data){
    window.site_dataB = data;
});

dpG = d3.time.format("%d.%m.%Y").parse;
dpS = d3.time.format("%Y-%m-%d").parse;

//
// var minDate = dpG("01.01.2015");
// var maxDate = dpG("31.12.2015");
var minDate = moment.utc("2015-01-01").toDate();
var maxDate = moment.utc("2016-01-01").toDate();
var secondsInDay = 1000 * 60 * 60 * 24; //DAYS

var slider = d3.slider()
    .axis(true).min(minDate).max(maxDate).step(secondsInDay)
    .on("slide", function(evt, value) {

    temp = moment(value,"x").utc().format("YYYY-MM-DD");
    tempVal = moment(temp).unix()*1000;


      if( filterCheck == 0 ){

        if( zoomCheck == 0 ){

          newDataW = site_dataW.features.filter(function(d){

            dataDate = moment(d.properties.date).utc().unix()*1000;
            // console.log("dataDate " + new Date(dataDate));
            // console.log("slidDate " + new Date(value));
            //console.log("-- " + moment(dataDate).toDate());


            if (dataDate == tempVal) {
              //console.log("Sucess");
              //console.log(moment(dataDate).toDate());
              return moment(dataDate).toDate();
            }
          });
          showWorldSite(newDataW)

        }

        else if( zoomCheck == 1 ){

          newDataG = site_dataG.features.filter(function(d){
            dataDate = moment(d.properties.date).utc().unix()*1000;
            //console.log(value);
            if (dataDate == tempVal) {
              //console.log("Sucess")
              return moment(dataDate).toDate();
            }
          })
          showGermanSite(newDataG);
        }

        else if( zoomCheck == 2 ){

          newDataS = site_dataS.features.filter(function(d){
            dataDate = d.properties.Date;
            if (dataDate == temp) {
              return moment(dataDate).toDate()
            }
          });

          showSyrianSite(newDataS);
        }

      }
//================================================================================================
//================================================================================================
//================================================================================================

      else if( filterCheck == 1 ) {
      //
        if( zoomCheck == 0 ){

          newDataW = site_dataW.features.filter(function(d){

            dataDate = moment(d.properties.date).utc().unix()*1000;

              //console.log(new Date(dataDate) < new Date(value));
              return moment(dataDate).toDate() < moment(tempVal).toDate() ;



          });
          //console.log(newDataW.length);
          showWorldSite(newDataW)

        }
      //
        else if( zoomCheck == 1 ){

          newDataG = site_dataG.features.filter(function(d){
            dataDate = moment(d.properties.date).utc().unix()*1000;
            //console.log(moment(dataDate).toDate());
            return moment(dataDate).toDate() < moment(tempVal).toDate() ;
          })
          // console.log(newDataG.length);
          // console.log(new Date(value));
          showGermanSite(newDataG);
        }

        else if( zoomCheck == 2 ){

          newDataS = site_dataS.features.filter(function(d){
            // dataDate = moment(d.properties.Date).utc().unix()*1000;
            dataDate = d.properties.Date;
            // return dpS(d.properties.Date) < new Date(value);
            // return moment(dataDate).toDate() < moment(tempVal).toDate() ;
            // return moment(dataDate).isBefore(tempVal);
            return new Date(dataDate) < new Date(temp);
          });

          showSyrianSite(newDataS);
        }

      }





    });

d3.select('#slider3').call(slider);

function showWorldSite(data){

  var siteDataW = sites.selectAll(".siteW")
      .data(data);


  siteDataW
      .enter()
      .append("circle")
      .attr("class", "siteW")
      .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[1]
      })
      .attr("r", 6)
      .transition().duration(70)
      .attr("r", 4);

    siteDataW.exit()//remove the selection which are to be removed from dataset
        .transition().duration(10)
        .attr("r",0)
        .remove();
}


function showGermanSite(data){


  var sitedataG = sites.selectAll(".siteG")
      .data(data);
  sitedataG
      .enter()
      .append("circle")
      .attr("class", "siteG")
      .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[1]
      })
      .on("click", tip.show)
      .on('mouseout', tip.hide)
      .attr("r", 1.25)
      .transition().duration(70)
      .attr("r", 0.25);
    sitedataG.exit()
      //.transition().duration(200)
        .attr("r",0)
        .remove();

}

function showSyrianSite(data){
  var radScale = d3.scale.linear()
    .domain(d3.extent(data, function(d){
      return d.properties.Value }))
    .range([0.1,.5]);
  var siteDataS = sites.selectAll(".siteS")
      .data(data);
  siteDataS
      .enter()
      .append("circle")
      .attr("class", "siteS")
      .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[1]
      })
      .attr("r", function(d){
        return 1.75 * radScale(d.properties.Value)
      })
      .transition().duration(70)
      .attr("r", function(d){
        return radScale(d.properties.Value)
      });

    siteDataS.exit()
        //.transition().duration(10)
        .attr("r",0)
        .remove();


}

function showSmth(){
  console.log("Here will be something soon");
}

var minZoomTresholdCountry=15
var minXG=-462，
maxXG=-552
minYG=-29，
maxYG=-98；
var minXS=-647，
maxXS=-544，
minYS=-104，
maxYS=-164；
var zoomCheck=0，//zoomCheck哪个缩放级别？关注哪个国家//0=世界1=德国2=叙利亚
filterCheck=1//POI是如何显示的？每天还是一段时间？每天0，随时间推移1
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.html（函数（d）{返回d.properties.description}）
.偏移量（[0,3]）；
svg.call（提示）
函数缩放（）{
g、 attr（“转换”、“转换”（+d3.event.translate+））比例（+d3.event.scale+））；
sites.attr（“transform”、“translate”（+d3.event.translate+））比例（+d3.event.scale+）；
var translate=zoom.translate（）；
var translateX=translate[0]/zoom.scale（）；
var translateY=translate[1]/zoom.scale（）；
//console.log（translate[0]/zoom.scale（）+“”+translate[1]/zoom.scale（））；
//console.log（zoom.scale（））；
如果（zoom.scale（）=minZoomTresholdCountry
&&translateXmaxg
&&translateYmaxYG）{
//控制台日志（“DE”）；
zoomCheck=1；
}
如果（zoom.scale（）>=minZoomTresholdCountry，则为else
&&translateX>minXS&&translateXvar sitedataG, sitedataS, sitedataW;

if (zoom.scale()<minZoomTresholdCountry) {
  zoomCheck = 0;
  sitedataG.remove();
  sitedataS.remove();
}
else if(zoom.scale() >= minZoomTresholdCountry
  && translateX< minXG && translateX > maxXG
  && translateY<minYG && translateY>maxYG){
    zoomCheck = 1;
    sitedataW.remove();
    sitedataS.remove();
}
else if(zoom.scale() >= minZoomTresholdCountry
  && translateX> minXS && translateX < maxXS
  && translateY<minYS && translateY>maxYS){
    //console.log("SYR");
    zoomCheck = 2;
    sitedataW.remove();
    sitedataG.remove();
}