From e932283f2040d20927286653bb049b406403ceb4 Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Wed, 24 Aug 2016 00:23:16 -0400 Subject: [PATCH] when zooming/panning, same transform for clicks later --- public/js/app.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/public/js/app.js b/public/js/app.js index ce0e57f..37c2d08 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -22,12 +22,18 @@ xScale.domain([MIN_DATE, MAX_DATE]); // SVG click handler +var lastTransform = null; d3.select('svg').on('click', function(d){ //d3.event contains data for click event var x = d3.event.offsetX; //use offset to get point within svg container var y = d3.event.offsetY; + if(lastTransform !== null){ + x = lastTransform.invertX(d3.event.offsetX); //use offset to get point within svg container + y = lastTransform.invertY(d3.event.offsetY); + } + var distance = yScale.invert(y); //get distance from click point in svg var date = xScale.invert(x); //get date from click point in svg @@ -135,6 +141,7 @@ d3.select('svg').append('g').attr('id', 'y-axis').call(yAxis); //y axis is good //callback for zooming var zoomCallback = function(){ + lastTransform = d3.event.transform; d3.select('#points').attr("transform", d3.event.transform); //apply transform to g element containing circles //recalculate the axes d3.select('#x-axis').call(xAxis.scale(d3.event.transform.rescaleX(xScale)));