D3在缩放事件中获取轴值 [英] D3 get axis values on zoom event
问题描述
我有一个来自 d3可缩放区域的简单可缩放图表
它具有日期x轴,当用户缩放时,我想获取图表x轴绑定值.
例如,我像这样放大
It has date x-axis, when user zooms, i want to get chart x-axis bound values.
For example i zoomed like this,
我想获取x轴值(2015年5月23日和2015年5月31日)以满足我的内部需求吗?尝试过但没有成功
I would like to get x-axis values, 23-May-2015 and 31-May-2015 for my internal needs, is possible? Tried this but no success
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. br>
有什么想法吗?
But x.invert(e.translate[0])
constantly returns Sat Oct 04 2014 12:56:40 GMT+0600 (ALMT)
which is first date in my data (filtered by date), also i don't think it's related to e.translate
as it has only 2 values, for x, y.
Any ideas?
推荐答案
如果您遵循以下示例( http ://bl.ocks.org/mbostock/4015254 ):
If you are following the example (http://bl.ocks.org/mbostock/4015254):
然后在 draw()函数
x.domain()
将为您提供当前状态的x轴的最大/最小数组.
will give you the max/min array for x-axis, of the current state.
这篇关于D3在缩放事件中获取轴值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!