在D3轉換中使用CSS值

我想使d3轉換爲CSS中定義的樣式。我可以成功轉換到我明確應用於代碼中的樣式值。但是，我想要在樣式表中定義動畫的目標值。在D3轉換中使用CSS值

這裏有一個紅色的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');

你可以添加你需要從CSS獲取的顏色，如果你不想硬編碼他們在您的JS類的一些隱藏要素。像

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來移除樣式也不會動畫。 –

我的意思是你追加你的假divs，然後使用他們生成的樣式作爲你的真實值的顯式值。見[這個JS小提琴]（http://jsfiddle.net/linssen/zasDK） – Wil

明智的想法，這很聰明，謝謝。 –

在D3轉換中使用CSS值

回答

相關問題