score:0

The transition works using the following simplified code:

html:

  <svg height='500' width='500'>
        <circle id='circ' cx='50' cy='50' r='10'></circle>   
    </svg>

js:

var d3target = d3.select('#circ');

d3target
  .transition()
  .attr('cx', 100 )
  .attr('cy', 100 )

fiddle

This means there is something else in the code that is stopping your transition from working. Following the link to your code, as far as I can see this is where you have the transition going on:

 if(this.parentMeasureModel.get('timesRecorded') !== 0) {
    d3target
      .attr('cx', newCX )
      .attr('cy', newCY )

    setTimeout(function(){
      d3target
        .attr('cx', originalCX )
        .attr('cy', originalCY )
    }, dur);
  // Otherwise we use the standard method
  } else {      
    d3target.transition()
      .attr('cx', newCX )
      .attr('cy', newCY )
      .duration(dur)
      .each('end',function() {                   // as seen above
        d3.select(this).                         // this is the object 
          transition()                           // a new transition!
            .attr('cx', originalCX )    // we could have had another
            .attr('cy', originalCY )    // we could have had another
            .duration(dur);                  // .each("end" construct here.
       });
  }
}

The difference between the two is the dur variable and the each method. Try using an actual value for the dur variable and removing the each method. If it works then your issue lies there.

score:2

First assign you transiton ( return of the transition method ) to a variable, then try console.log(transition_selection.empty()). If it's false then you know that you have something to transition.

Second try: transition_selection.each('start', function(){ console.log('started'); }).each('interrupt', function() {console.log('interrupted');}).each('end', function(){ console.log('ended'); });

This way you'll be able to see if transition was started and was interrupted.

Third try: transition.attr('cx', function (d) { console.log( 'attr got assigned'); ) });

This way you will know if the value you provided for 'cx' was read.

Actually try all of the above in the same run. So that you can see what happens in what order.

Always try naming you transitions. d3traget.transition('somename')

This way you can run many transitions on the same selection in parallel. If you run more than one "unnamed" transitions on the same selection, the second transition will stop the first one.

Hope any of what I've given to you will help you resolve your problem. Good luck!


Related Query