2016-01-13 64 views
1

我有一个时间尺度,在缩放和滚动后,我需要在另一个时间尺度上显示完全相同的时间段。实际上我知道如何做到这一点,但我需要保持缩放级别限制一致。目前,我将域和zoom.scale()值保存到变量中,并在新时间范围内设置域和缩放级别。但无论如何,它会显示正确的时间段,直到您在缩放到错误的时间段后触摸缩放比例。d3时间尺度设置初始缩放级别和域名

if ($rootScope.curScroll.domain) 
      scale = d3.time.scale() 
       .domain($rootScope.curScroll.domain) 
       .range([0, w]); 
     else { 
      var now = new Date(); 
      scale = d3.time.scale() 
       .domain([new Date().setTime(now.getTime() - (182.5 * 24 * 60 * 60 * 1000)), new Date().setTime(now.getTime() + (182.5 * 24 * 60 * 60 * 1000))]) 
       .range([0, w]); 
     } 
     var first = scale.domain()[0].toString(); 
     var last = scale.domain()[1].toString(); 
     var tmp = 0; 

     xaxis = d3.svg.axis().scale(scale) 
      .orient("top") 
      //.tickSubdivide(2) 
      .tickSize(25, 0) 
      .tickFormat(function(d, i, e) { 
       svg.select("g").selectAll("text") 
        .style("font-size", "10px") 
        .each(function() { 
         if (this.textContent != "") { 
          if (this.textContent == dateToDateShortString(new Date())) { 
           this.classList.add("today"); 
           return; 
          } 
          var ar = this.textContent.split("/"); 
          var dt = new Date(parseInt(ar[2], 10), parseInt(ar[1], 10) - 1, parseInt(ar[0], 10)); 
          if (dt.getDay() == 0 || dt.getDay() == 1) { 
           this.classList.add("weekend"); 
          } 
         } 
        }); 
       var ind = getInd($rootScope.selectedField, d.toISOString()); 
       { 
        $rootScope.curScroll.domain = scale.domain(); 
        var first = scale.domain()[0].toString(); 
        var last = scale.domain()[1].toString(); 
        $rootScope.curScroll.zoom = zoom.scale(); 
        curZoom = zoom.scale(); 
        var k = 0; 
        if ((d.getMonth() + 1) % 2 == 0) 
         k = 1; 
        if (curZoom >= 64.1) { 
         if (d.getHours() == 0) { 
          if (ind != -1) weat.push(d); 
          return ""; 
         } else return dateToDateShortString(d); 
        } else if (curZoom >= 32.5 && ind != -1) { 
         if (d.getDate() % 2 == 0) { 
          weat.push(d); 
          return ""; 
         } else return dateToDateShortString(d); 
        } else if (curZoom >= 10.13 && ind != -1) { 
         if ((d.getDate() + 1)/2 % 2 == 0) { 
          weat.push(d); 
          return ""; 
         } else return dateToDateShortString(d); 
        } else if (curZoom >= 2.62 && ind != -1) { 
         if (d.getWeekNumber() % 2 == 0) { 
          weat.push(d); 
          return ""; 
         } else return dateToDateShortString(d); 
        } else if (curZoom >= 0.87 && ind != -1) { 
         if ((d.getMonth() + 1) % 2 == 0) { 
          weat.push(d); 
          return ""; 
         } else return dateToDateShortString(d); 
        } else { 
         if ((d.getMonth() + 2) % 2 != 0 && ind != -1) { 
          weat.push(d); 
          return ""; 
         } else return dateToDateShortString(d); 
        } 
       } 
       return dateToDateShortString(d); //"Year1 Year2, etc depending on the tick value - 0,1,2,3,4" 
      }); 

     if ($rootScope.curScroll.zoom) { 
      var zoom = d3.behavior 
       .zoom() 
       .scaleExtent([0.5, 100]) 
       .on("zoom", function(a, b, c) { 
        svg.select("g").call(xaxis); 
        getDateRange(); 
        $scope.isDateInRangeMap(); 
        update_events(); 
        weat = []; 
        $scope.$apply(); 
       }) 
       .x(scale) 
       .scale($rootScope.curScroll.zoom);//Here I'm setting needed zoom level 
      scale.domain($rootScope.curScroll.domain);//Here I'm trying to reset needed domain after applying needed zoom level 
      svg.select("g").call(xaxis); 
     } 

这是要走的路还是有我失踪的东西?

回答

0

经过一段时间的调查这个问题,我发现我需要保存翻译保证的域名,如果我应用zoom.scale()与保存的值,然后应用zoom.translate()与保存的值它工作正常。您只需要使用svg.select(“g”)重绘控制。call(xaxis);以下是最终代码:

if ($rootScope.curScroll.zoom) 
     zoom.scale($rootScope.curScroll.zoom); 
    if ($rootScope.curScroll.translate) 
     zoom.translate($rootScope.curScroll.translate); 
    svg.select("g").call(xaxis);