d3.transition(). Attr ('x', y) non funziona quando d3.attr ('x', y) fa

Question

I seguenti lavori (il cerchio si sposterà nella nuova posizione nei punti forniti)

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

ma questi non:

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

e né fa questo: (fornendo un valore iniziale 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 

I cerchi no animare, né muoversi affatto. Abbiamo provato a impostare manualmente dur su 1 secondo per garantire che l'animazione non stesse finendo o saltando perché era troppo piccola per essere notata o saltata o qualcosa di simile.

Abbiamo provato e considerato molte possibilità sul perché, quindi qualsiasi idea sul perché o su che altro provare è molto apprezzata.

Informazioni di base per riferimento:
Il d3Target appare come segue, e per quello che sappiamo è corretto, dal momento che il primo blocco di codice di opere solo regolando la attr s direttamente senza una chiamata transition().

Answer 1

La transizione funziona utilizzando il seguente codice semplificato:

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

Ciò significa che c'è qualcos'altro nel codice che impedisce la transizione dal lavoro. seguito il link al tuo codice, per quanto posso vedere questo è dove si ha la transizione in corso:

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. 
     }); 
    } 
} 

La differenza tra i due è il dur variabile e l'ogni metodo. Prova a utilizzare un valore effettivo per la variabile dur e rimuovi ciascun metodo. Se funziona, il problema è lì.

Answer 2

Prima assegnare il transito (ritorno del metodo di transizione) a una variabile, quindi provare console.log(transition_selection.empty()). Se è falso, allora sai che hai qualcosa da cambiare.

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

In questo modo sarete in grado di vedere se la transizione è stato avviato ed è stata interrotta.

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

In questo modo si saprà se il valore fornito per 'cx' stato letto.

Effettivamente, prova tutto quanto sopra nella stessa sessione. In modo che tu possa vedere cosa succede in quale ordine.

Provare sempre a denominare le transizioni.d3traget.transition('somename')

In questo modo è possibile eseguire molte transizioni sulla stessa selezione in parallelo. Se si eseguono più transizioni "senza nome" sulla stessa selezione, la seconda transizione interromperà la prima.

Spero che tutto ciò che ti ho dato ti aiuterà a risolvere il tuo problema. In bocca al lupo!