D3トランジションでのCSS値の使用

d3をCSSで定義されたスタイルに移行させたいと思います。コードで明示的に適用するスタイル値に正常に移行できます。しかし、アニメーションのターゲット値をスタイルシートに定義したいと思います。ここでD3トランジションでのCSS値の使用

は、青1に遷移し、赤div要素の例です：

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

そして、ここでは、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>

前者は背景を赤から青にアニメーション化します。後者は赤から青にジャンプします（トゥイーンはCSSで定義された背景値に適用されません）。

私はそれが動作しない理由を理解すると思います。 d3のCSSスタイルの値のセットにアニメーションを付けることはできますか？どのようにすればいいですか？

出典

2013-10-06 Daniel James Bryars

selection.styleは、値を渡さないとブラウザの生成スタイル（外部CSSから）を返します。例えば背景色を取得するには、次の

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

あなたはあなたがあなたのJSでそれらをハードコーディングしたくない場合は、CSSから色を取得するために必要なクラスを持ついくつかの隠し要素を追加することができます。

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

その後

oneとtwoような何かはあなたが必要なスタイルを持っているでしょう。そう。

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

ここにはFiddleがあります。

出典

2013-10-06 21:13:23 Wil

ありがとうございました。これは知っておくと便利ですが、スタイルの変更を直ちに適用し、変更を計算されたスタイルにアニメートしません。また、スタイルを削除するためにnullを渡してもアニメーション化されません。 –

私はあなたの偽のdivを追加してから、実際に生成されたスタイルを明示的な値として使用することを意味します。 [this JS fiddle]（http://jsfiddle.net/linssen/zasDK） – Wil

賢いアイデアは、ありがとう。 –

D3トランジションでのCSS値の使用

答えて

関連する問題