Question

In my index.html I have an svg viewbox:

<svg viewBox = "0 0 2000 2000" version = "1.1">
</svg>

I wish to animate an svg ellipse I have created such that when the ellipse is clicked it moves vertically to a certain y point we’ll call TOP, and if clicked again moves back to its original position called BOTTOM. Currently I am using the following code which works to an extent.

var testFlag = 0;    
d3.select("#ellipseTest").on("click", function(){
if (testFlag == 0){
  d3.select(this)
      .attr("transform", "translate(0,0)")
      .transition()
        .duration(450)
        .ease("in-out")
        .attr("transform", "translate(0,-650)")
    testFlag = 1;
}else{
 d3.select(this)
      .attr("transform", "translate(0,-650)")
      .transition()
        .duration(450)
        .ease("in-out")
        .attr("transform", "translate(0,0)")
testFlag = 0;
}
});

The issue however, is that I have also made the ellipse drag-able up to the point TOP and down to the point BOTTOM. So if I drag the ellipse halfway in between TOP and BOTTOM, then click the ellipse, it animates vertically above TOP, instead of stopping when it reaches TOP (and like wise for BOTTOM when animating down). This seems to be a result of how the transform translate method works.
I believe I can resolve this if I create a function that dynamically returns the amount the ellipse should translate relative to where the mouse clicks (or better yet, to where the ellipse is currently position) . The problem is that I can’t figure out how to get the current y position of the element relative to the viewbox, rather I can only get the position with respect to the entire page.

Here is the faulty code I am using to get the position of my click:

var svg2 = document.getElementsByTagName('svg')[0];
var pt = svg2.createSVGPoint();
document.documentElement.addEventListener('click',function(evt){    
    pt.x = evt.clientX;
    pt.y = evt.clientY;
    console.log('Position is.... ' + pt.y);
},false);

Here is my working code to make the ellipse draggable:

//These points are all relative to the viewbox
var lx1 = -500;
var ly1 = 1450;
var lx2 = -500;
var ly2 = 800;
function restrict(mouse){ //Y position of the mouse 
    var x;
    if ( (mouse < ly1) && (mouse > ly2) ) {
        x = mouse;
    }else if (mouse > ly1){
        x = ly1;
    }else if (mouse < ly2) {
        x = ly2;
    }
    return x;
}


var drag = d3.behavior.drag()
    .on("drag", function(d) {
      var mx = d3.mouse(this)[0];
      var my = d3.mouse(this)[1];


      d3.select("#ellipseTest")
        .attr({
          cx: lx2,
          cy: restrict(d3.mouse(this)[1])
        });
    })

Answer 1

Animate cy instead of the transformation…

var testFlag = 0;    
d3.select("#ellipseTest").on("click", function(){
if (testFlag == 0){
  d3.select(this)
      .transition()
        .duration(450)
        .ease("in-out")
        .attr("cy", 0)
    testFlag = 1;
}else{
 d3.select(this)
      .transition()
        .duration(450)
        .ease("in-out")
        .attr("cy", 650)
testFlag = 0;
}
});