Perché le transizioni sfarfallio/balbuzie quando applicate in una funzione separata (D3)

Question

Mi sono trovato a disagio con le transizioni e ho notato un po 'di balbuzie e tremolio quando le transizioni sono applicate alla selezione in una funzione diversa. Se, tuttavia, la transizione viene applicata con il concatenamento del metodo, funziona esattamente come prescritto.

Di seguito è un piccolo esempio (Fiddle) di spostare semplicemente del testo. La prima stringa più a sinistra magicamente si teletrasporta nella pagina prima dell'inizio della transizione. La seconda stringa più a destra ha una transizione graduale dalla parte superiore alla parte inferiore della pagina.

Perché questo "teleport" si verifica? Ovviamente applicare le transizioni in una funzione separata non equivale a concatenarle, ma esiste un modo per ottenere ciò? Dite, voglio applicare la stessa transizione a molti oggetti diversi - recuperati da selezioni differenti - quindi c'è un modo per relegare la transizione alla propria funzione senza ottenere questa balbuzie?

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

Answer 1

Non ho usato d3, ma intendi farlo?

applyTextTransitions(textElem, { x: 30, y: 150 }); 

function applyTextTransitions(element, newPos) { 
    element 
    .transition() 
    .duration(1000) 
    .style('opacity', 0) 
    .transition() 
    .duration(1000) 
    .attr(newPos) 
    .style('opacity', 1) 
    .text(function(d){ 
     return d; 
    }); 
} 

https://jsfiddle.net/k8kv4arv/3/

Il "salto" avviene perché le funzioni di chiamata attende fino applyTextTransitions() è finito, quindi applica le nuove dimensioni.

Answer 2

So di essere in ritardo alla festa, ma ...

La balbuzie che si stanno ottenendo è solo perché si chiama una funzione di transizione, applyTextTransition, e quindi di cambiare immediatamente il posizionamento dell'elemento.

applyTextTransitions(textElem); 
textElem.attr({ 
    x: 30, 
    y: 150 
}); 

Ecco perché si ottiene la balbuzie indesiderata.

---

Inoltre, il corretto modo D3 riutilizzare le funzioni relative transizioni è quello di utilizzare selection.call. Ciò consente di dichiarare una funzione e utilizzare il metodo call per richiamare la funzione che applica la transizione.

textElem.call(applyTextTransition); 

function applyTextTransition(selection) { 
    // perform selection.transition() 
} 

È ora possibile utilizzare la funzione nel vostro concatenamento e non si è limitato a utilizzare questa funzione solo per la selezione corrente.