Verwenden von CSS-Werten in einem D3-Übergang

Ich möchte d3 Übergang zu einem Stil in CSS definiert. Ich kann erfolgreich zu einem Stilwert übergehen, den ich explizit im Code anwende. Aber ich möchte, dass die Zielwerte der Animation in einem Stylesheet definiert werden.Verwenden von CSS-Werten in einem D3-Übergang

Hier ist ein Beispiel eines roten div, die auf einem blauen Übergänge:

<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>

Und hier ist eine meiner (falsche) Versuch, diese Werte in CSS „Speichern“:

<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>

Die früher animiert den Hintergrund von rot nach blau. Letzteres springt von Rot nach Blau (kein Tweening wird auf den im CSS definierten Hintergrundwert angewendet).

Ich denke, ich verstehe, warum es nicht funktioniert. Kann ich in d3 eine Reihe von Werten in einem CSS-Stil animieren, und wie würde ich das tun?

Quelle

2013-10-06 Daniel James Bryars

selection.style wird den vom Browser generierten Stil (von externem CSS) zurückgeben, wenn Sie keinen Wert übergeben. Um die Hintergrundfarbe zum Beispiel erhalten:

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

Sie könnten einige versteckte Elemente mit den Klassen anhängen müssen Sie die Farben von CSS holen, wenn Sie nicht wollen, sie in Ihrem JS codieren. So etwas wie

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

Dann one und two würde die Stile, die Sie brauchen. Damit.

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

Hier ist ein Fiddle.

Quelle

2013-10-06 21:13:23 Wil

Danke. Das ist nützlich zu wissen, aber es wendet die Stiländerung sofort an, es animiert die Änderung des berechneten Stils nicht. Das Übergeben von null, um den Stil zu entfernen, wird auch nicht animiert. –

Ich meine, Sie fügen Ihre gefälschten divs hinzu und verwenden dann ihre generierten Stile als expliziten Wert für Ihren echten. Siehe [diese JS Geige] (http://jsfiddle.net/linssen/zasDK) – Wil

Brilliante Idee, das ist schlau, danke. –

Verwenden von CSS-Werten in einem D3-Übergang

Antwort

Verwandte Themen