簡體   English   中英

D3在縮放事件中獲取軸值

[英]D3 get axis values on zoom event

我有一個來自d3可縮放區域的簡單可縮放圖表 在此處輸入圖片說明

它具有日期x軸,當用戶縮放時,我想獲取圖表x軸綁定值。
例如我像這樣放大 在此處輸入圖片說明

我想獲取x軸值(2015年5月23日和2015年5月31日)以滿足我的內部需求嗎? 嘗試了這個但沒有成功

function draw(){
            var e = d3.event;
            if(e){
                var tx = Math.min(0, Math.max(e.translate[0], width - width*e.scale));
                var ty = Math.min(0, Math.max(e.translate[1], height - height*e.scale));
                console.log(x.invert(e.translate[0]), x.invert(tx));
                zoom.translate([tx, ty]);
                g.attr('transform', [
                    'translate(' + [tx, ty] + ')',
                    'scale(' + e.scale + ')'
                ].join(' '));
                svg.call(zoom);
            }
            svg.select('g.x.axis').call(xAxis);
            svg.select('g.y.axis').call(yAxis);
            svg.select('path.area').attr('d', area);
            svg.select('path.line').attr('d', line_low);
            svg.select('path.line').attr('fill', 'blue').attr('stroke-width', 4).attr('d', minTempLimitLine);
            svg.select('path.line').attr('fill', 'red').attr('stroke-width', 4).attr('d', maxTempLimitLine);
        }

但是x.invert(e.translate[0])不斷返回Sat Oct 04 2014 12:56:40 GMT+0600 (ALMT)這是我數據中的第一個日期(按日期過濾),我也不認為這是相關的e.translate因為它只有2個值(x,y)。
有任何想法嗎?

如果您遵循的示例( http://bl.ocks.org/mbostock/4015254 ):

然后在draw()函數中

x.domain()

將為您提供當前狀態的x軸的最大/最小數組。

您可以從xAxis縮放功能獲取此信息。

xScale.domain()[0];
xScale.domain()[1];

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM