I was messing around with transitions and I noticed some stuttering and flickering when the transitions are applied to the selection in a different function. If, however, the transition is applied with method chaining, it works exactly as prescribed. 

Below is small example ([Fiddle](https://jsfiddle.net/Fjotten/k8kv4arv/1/)) of simply moving some text. The first, leftmost, string magically teleports down the page before the transition starts. The second, rightmost, string has a smooth transition from the top to the bottom of the page.

Why does this 'teleport' happen? Obviously applying the transitions in a separate function is not the same as chaining it, but is there a way to achieve this? Say, I want to apply the same transition to many different objects - retrieved from different selects - then is there a way to relegate the transition to its own function without getting this stuttering?

```
var svg = d3.select('svg');
var textElem = svg.append('text')
    .data(['hello world'])
    .attr('x', 30)
    .attr('y', 100)
    .attr('fill', '#000')
    .attr('id', 'a')
    .text(function (d) {
        return d;
    });
var textElem2 = svg.append('text')
    .data(['some text'])
    .attr('x', 230)
    .attr('y', 100)
    .attr('fill', '#000')
    .attr('id', 'a')
    .text(function (d) {
        return d;
    });
setTimeout(foo, 3000);

function foo() {
    textElem.data(['hello world, again!']);
    applyTextTransitions(textElem);
    textElem.attr({
        x: 30,
        y: 150
    });
    textElem.text(function (d) {
        return d;
    });

    textElem2.data(['some more text!'])
        .transition()
        .duration(1000)
        .style('opacity', 0)
        .transition()
        .duration(1000)
        .style('opacity', 1)
        .attr({
            x: 230,
            y: 150
        })
        .text(function (d) {
            return d;
        });
}

function applyTextTransitions(element) {
    element
        .transition()
        .duration(1000)
        .style('opacity', 0)
        .transition()
        .duration(1000)
        .style('opacity', 1);
}

```
['https://Stackoverflow.com/questions/37307901', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4231740/']
You could use a simple circle collision detection such as described on msdn website: <https://msdn.microsoft.com/en-us/library/dn265052(v=vs.85).aspx>

```
function circlesOverlap(circleA, circleB) { // Returns true if the SVG circles A and B overlap, false otherwise.
    var deltaX = circleA.cx.baseVal.value - circleB.cx.baseVal.value;
    var deltaY = circleA.cy.baseVal.value - circleB.cy.baseVal.value;
    var distance = Math.sqrt( (deltaX*deltaX) + (deltaY*deltaY) ); // The classic distance-between-two-points formula.
    var radiusA = circleA.r.baseVal.value; // The radius of circle A.
    var radiusB = circleB.r.baseVal.value; // The radius of circle B.

    if (circleA.id == circleB.id) // If true, circleA and circleB are the same circle.
      return false;

    return distance <= (radiusA + radiusB);
};

```

Using your fiddle, this is what it gives:
<https://jsfiddle.net/odubuc/qk3qrwbp/15/>

Your animate function is now as simple as:

```
function animate () {
    var earth = document.getElementById("Earth"),
        sun = document.getElementById("Sun");

    planetrotation("Earth");  

    if( circlesOverlap(earth, sun) )
    {
        earth.setAttribute("fill-opacity", "0.0"); 
        sun.setAttribute("fill-opacity", "0.0");
    }
}

```
Try using .offset() rather than .position() (check the console, with position, the values are never changing, with offset, they change)

```
var positionplanet = $("#Earth").offset();
var positionsun = $("#Sun").offset();

```

<https://jsfiddle.net/zkuhpjwf/>

As far as a good collision detection, you could write something saying if the planet's top offset is greater than the sun's top offset, but less than the sun's top offset + the sun's height and something similar for left offset/height. To trigger just when the planet touches the sun in any direction, you could throw in the planet's height and width to the equation. It would take some playing

```
if ( (positionplanet.left > positionsun.left && positionplanet.left < positionsun.left + SUNWIDTH) && (positionplanet.top > positionsun.top && positionplanet.top < positionsun.top + SUNHEIGHT) ) {
    //the planet is completely inside of the sun
} 

if ( (positionplanet.left > positionsun.left - PLANETWIDTH && positionplanet.left < positionsun.left + SUNWIDTH - PLANETWIDTH) && (positionplanet.top > positionsun.top - PLANETHEIGHT && positionplanet.top < positionsun.top + SUNHEIGHT - PLANETHEIGHT) ) {
    //the planet is touching the sun (will need some fiddling I'm sure..)
} 

```