Utilizzo di valori CSS in una transizione D3

Vorrei passare a uno stile definito in CSS. Posso passare con successo a un valore di stile che applico esplicitamente nel codice. Ma, mi piacerebbe che i valori obiettivo dell'animazione fossero definiti in un foglio di stile.Utilizzo di valori CSS in una transizione D3

Ecco un esempio di un div rossa che transizioni ad un azzurro uno:

<html> 
    <head> 
     <script src="http://d3js.org/d3.v3.js"></script> 
     <style>    
      div { 
       background: red 
      } 
     </style> 

    </head> 
    <body> 
     <div>Hello There</div> 

     <script> 
      d3.select('body div') 
       .transition() 
       .duration(5000) 
       .style("background", "cornflowerblue"); 
     </script> 
    </body> 
</html>

Ed ecco una mia (non corretta) tentativo di "memorizzare" questi valori in CSS:

<html> 
    <head> 
     <script src="http://d3js.org/d3.v3.js"></script> 
     <style>    
      div { 
       background: red 
      } 

      div.myDiv { 
       background: cornflowerblue 
      } 
     </style> 
    </head> 
    <body> 
     <div>Hello There</div> 

     <script> 
      d3.select('body div') 
       .transition() 
       .duration(5000) 
       .attr("class", "myDiv"); 
     </script> 
    </body> 
</html>

Il ex anima lo sfondo dal rosso al blu. Quest'ultimo passa da rosso a blu (nessun tweening viene applicato al valore di sfondo definito nel CSS).

Penso di capire perché non funziona. Posso animare a un set di valori in uno stile CSS in d3 e come dovrei farlo?

fonte

2013-10-06 Daniel James Bryars

selection.style restituirà lo stile generato dal browser (da CSS esterno) se non si passa un valore ad esso. Per ottenere il colore di sfondo, ad esempio:

var bg = d3.select('div').style('background-color');

Si potrebbero aggiungere alcuni elementi nascosti con le classi è necessario per recuperare i colori da CSS se non si vuole hardcode nelle vostre JS. Qualcosa di simile

var one = d3.select('body').append('div').class('my-first-color'); 
var two = d3.select('body').append('div').class('my-second-color');

Poi one e two avrebbe gli stili che avete bisogno. Così.

var fake_div = d3.select('body').append('div').attr('class', 'some_class').style('display', 'none'), 
    new_color = fake_div.style('background-color'); 

// We don't need this any more 
fake_div.remove(); 
// Now we have an explicit value, effectively fetched from our CSS 
d3.select('div').style('background-color', new_color);

Ecco uno Fiddle.

fonte

2013-10-06 21:13:23 Wil

Grazie. È utile sapere, tuttavia applica immediatamente il cambio di stile, non anima la modifica allo stile calcolato. Inoltre, passando null per rimuovere lo stile non si anima neanche. –

Voglio dire che aggiungi le tue div false e poi usi i loro stili generati come un valore esplicito per il tuo vero. Vedi [questo JS fiddle] (http://jsfiddle.net/linssen/zasDK) – Wil

Un'idea geniale, è intelligente, grazie. –

Utilizzo di valori CSS in una transizione D3

risposta

Problemi correlati