D3在缩放事件中获取轴值

时间:2015-10-05 11:45:30

标签: javascript d3.js

我有d3 zoomable area的简单缩放图表 enter image description here

它具有日期x轴,当用户缩放时,我想获得图表x轴绑定值。
例如我放大了这个, enter image description here

我想获得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相关对于x,y,它只有2个值 有什么想法吗?

2 个答案:

答案 0 :(得分:2)

如果您关注示例(http://bl.ocks.org/mbostock/4015254):

然后在 draw()函数

x.domain()

将为您提供当前状态的x轴的最大/最小数组。

答案 1 :(得分:0)

您可以从xAxis比例功能中获取此信息。

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