Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3.transition().attr('x', y) does not work when d3.attr('x', y) does

The following works (the circle will move to the new location at the point(s) provided)

d3target
  .attr('cx', newCX )
  .attr('cy', newCY )

but these do not:

d3target
  .transition()
  .attr('cx', newCX )
  .attr('cy', newCY )
   // .duration(1000) // Still doesn't work with or without the duration

and nor does this: (by providing a starting value as suggested by API docs)

d3target
  .attr('cx', originalCX )
  .attr('cy', originalCY )
  .transition()
  .attr('cx', newCX )
  .attr('cy', newCY )
   // .duration(1000) // Still doesn't work with or without the duration

The circles do not animate, nor move at all. We tried manually setting the dur to 1 second to ensure that the animation wasn't finishing or skipping because it was too small for it to be noticed or skipped or the like.

We have tried and looked at lots of possibilities as to why, so any thoughts as to why or what else to try is greatly appreciated.

Basic info for reference:
The d3Target looks as follows, and to what we know is correct, given that the first code block works by just adjusting the attrs directly without a transition() call.

d3Target description

like image 718
chris Frisina Avatar asked Oct 29 '15 15:10

chris Frisina


1 Answers

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!

like image 177
sergeyz Avatar answered Nov 08 '22 09:11

sergeyz