D3 transition stop in the middle of dragend event

Question

Can anyone help with this situation? I have two circles, one inside the other that should move together when I drag the outer one. The inner circle should appear only when the mouse is over the outer circle. When the drag is finished, both circles should go back to origin position. Here is fiddle with an example . And here is the code for it:

    var deg90 = Math.PI / 2,
ptOuter = [200, 250],
rOuter = 70,
rInner = 10;

var ptInner = innerCircleXY(ptOuter[0],ptOuter[1],rOuter,rInner);

var drag = d3.behavior.drag()
.on("drag", function () {
    var c2NewX=parseInt(outerCircle.attr("cx"),10) + d3.event.dx;
    var c2NewY=parseInt(outerCircle.attr("cy"),10) + d3.event.dy;
    var icNewX=parseInt(innerCircle.attr("cx"),10) + d3.event.dx;
    var icNewY=parseInt(innerCircle.attr("cy"),10) + d3.event.dy;

    outerCircle.attr({
        "cx": c2NewX,
        "cy": c2NewY
    });
    innerCircle.attr({"cx":icNewX, "cy":icNewY});
})
.on("dragend",function() {
    innerCircle.transition().attr({"cx": ptInner[0],"cy": ptInner[1]});
    outerCircle.transition().attr({"cx": ptOuter[0],"cy": ptOuter[1]});
});

var svg = d3.select('body').append('svg');

var outerCircle = svg.append('circle').attr({
    cx: ptOuter[0],
    cy: ptOuter[1],
    r: rOuter,
    fill: '#FFA300',
    stroke: '#FFA300',
    "stroke-width": 0})
    .style({'cursor': 'pointer'})
    .call(drag);

var innerCircle = svg.append('circle').attr({
    "id":"clicks",
    cx: ptInner[0],
    cy: ptInner[1],
    r: rInner,
    fill: 'white',
    stroke: '#666666',
    "stroke-width": 1,
    "stroke-opacity": 0.9})
    .style({'cursor': 'pointer', 'opacity':'0.0'});

outerCircle.on("mouseover", function(){innerCircle.transition().style({'opacity':'1.0'}).duration(300);});
outerCircle.on("mouseout", function(){innerCircle.transition().style({'opacity':'0.0'}).duration(300);});

function innerCircleXY(oX, oY, oR, iR) { var rDiff = Math.abs(oR - iR); var angle = Math.PI/3; // 60 degrees var x = oX + rDiff*Math.sin(angle); var y = oY + rDiff*Math.cos(angle); return ([x,y]); }

The problem is that when I drag the outer circle and release, the inner circle doesn't go all the way back, but stop in the middle. I'm not sure what am I doing wrong.

--> UPDATE <-- This happens arbitrary and could be a case of specific OS or browser (for me it is OSX with chrome or safari).

Here is a screencast of what happens on my computer.

Answer 1

The screencast doesn't work for me, but I think the problem is this line (and also the mouseover line, but its less likely to happen)...

outerCircle.on("mouseout", function(){innerCircle.transition().style({'opacity':'0.0'}).duration(300);});

I think what is probably happening is that the transition is conflicting with the previous transition thats taking place, if you move the mouse, so it feels intermittent, as this doesn't always happen.

So you may need to have a think about what you want to happen in this case. If you comment the line out, I think it should work ok (without the opacity change).