简体   繁体   中英

D3 get axis values on zoom event

I have a simple zoomable chart from d3 zoomable area 在此处输入图片说明

It has date x-axis, when user zooms, i want to get chart x-axis bound values.
For example i zoomed like this, 在此处输入图片说明

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);
        }

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?

If you are following the example ( http://bl.ocks.org/mbostock/4015254 ):

Then in the draw() function

x.domain()

will give you the max/min array for x-axis, of the current state.

You can get this information from your xAxis scale function.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM