當我打電話d3.behavior.zoom我的圖表range.domain（）變爲空

我有5曲線和相同的X標度（時間）1 圖表當我打電話d3.behavior.zoom我的圖表range.domain（）變爲空

ths.xRange = d3.time.scale().range([0, ths._innerWidth()]); 
ths.xAxis = d3.svg.axis().scale(ths.xRange).orient("bottom"); 
ths.curves = [];

每個曲線是兒童圖

function curve(parent, init) { 
    var ths = this; 
    ths.parent = parent; 
    ths.yRange = d3.scale.linear().range([ths.parent._innerHeight(), 0]); 
    ths.xDomain = ths.parent.xRange.domain(d3.extent(ths.data.initial.map(function(d) { return d.date; }))); 
    ths.yDomain = ths.yRange.domain(d3.extent(ths.data.initial.map(function(d) { return d.val; }))); 
    // line generator 
    ths.line = d3.svg.line() 
     .interpolate("linear") 
     .x(function(d) { return ths.xDomain(d.date); }) 
     .y(function(d) { return ths.yDomain(d.val); });

但是當我使用變焦：

ths._Sensitive.call(
      ths.CurrentZoom = d3.behavior.zoom() 
      .x(ths.xRange) 
      .scaleExtent([1,1000]) 
      .on("zoom", function() { 
       window.clearTimeout(ths.timeoutID); 
       ths.timeoutID = window.setTimeout(function() { 
        console.log('event <Improove granularity>'); 
       }, 
       400); // Delay (in ms) before request new data 
       ths.zoom(); 
      } 
     ) 
    ); 
    ths.zoom = function(){ 
     console.log ('ths.xRange.domain()=', ths.xRange.domain()); 
     // trace l'axe X 
     ths.svg().select("#xAxis").call(ths.xAxis); 
    }

我域有問題（）變焦域之前好

graph.xRange.domain() 
[Tue Jan 01 2013 00:32:00 GMT+0100 (CET), Wed Apr 10 2013 21:00:00 GMT+0200 (CEST)]

但放大後，我的網域（）是錯誤的！

graph.xRange.domain() 
[Thu Jan 01 1970 01:00:00 GMT+0100 (CET), Thu Jan 01 1970 01:00:00 GMT+0100 (CET)]

我不明白這種行爲。

來源

2013-04-10 Alban

你還沒有告訴我們，當你放大到底發生了什麼。好像你在調用'ths.zoom（）'，但是你沒有給我們定義這個函數。 – 2013-04-12 08:16:12

ths.zoom（）幾乎是空的：它顯示x.domain（）在控制檯和重繪x軸。我加了。 – Alban 2013-04-12 15:43:50

在curve()你重寫ths功能。因此，在致電zoom()時，所用的ths值不再具有xAxis值，這意味着您在ths.svg().select("#xAxis")上調用undefined，結果將軸的域設置爲empty，因爲它必須是數組。

覆蓋this的目標是能夠在子函數中使用它，因此您不應該在子函數中重寫它。

順便說一句。你應該使用ths.svg.select("#xAxis")代替ths.svg().select("#xAxis")，因爲我不知道爲什麼代表SVG元素的svg變量應該是一個變量。

來源

2013-04-16 06:10:46

關於時間尺度，如果你定義縮放時沒有設置時間表的領域，無效時間的行爲觀察。在時間範圍上設置域後，您可以通過在縮放上設置時間表來進行掩蓋。

var xScale = d3.time.scale() 
       .range([0,width]); 

var zoom = d3.behavior.zoom() 
      .on("zoom", function(){ 
       console.log("zoomed", d3.event.scale); 
      }); 

xScale.domain([new Date('2014-03-15'), new Date('2014-03-30')]); 

zoom.x(xScale);

來源

2014-03-26 08:46:03 ashish

當我打電話d3.behavior.zoom我的圖表range.domain（）變爲空

回答

相關問題