轉換樣式返回CSS默認值

Question

我正在研究一些D3可視化，我發現我必須在我的代碼中定義很多樣式 - 我真的更喜歡在我的CSS 。

這樣做的原因僅僅是支持轉換。 我發現我可以運行從CSS應用的CSS到內聯樣式的轉換，但是我無法將該樣式刪回原始樣式。 相反，所有這些都需要在線。 如下例所示：

 var svg = d3.select("svg"); var c1 = svg.append("circle") .attr("class", "red") .attr("r", 25) .attr("cx", 50) .attr("cy", 50); var c2 = svg.append("circle") .attr("r", 25) .attr("cx", 250) .attr("cy", 50) .style("fill", "red"); svg.selectAll("circle") .transition() .delay(2000) .duration(2000) .style("fill", "blue"); c1.transition() .delay(5000) .duration(2000) .style("fill", ""); c2.transition() .delay(5000) .duration(2000) .style("fill", "red"); 

 .red { fill: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg width="500" height="500"> </svg> 

左邊的圓圈直接跳回紅色，而右邊的圓圈則向后跳轉。

我想要做的是將左側圓圈轉換回來，而不必在我的Javascript代碼中重新定義我在CSS中使用的原始顏色。

有誰知道實現這一目標的優雅方式？

Answer 1

所以使用Gilsha的答案我設法弄清楚你以后可以實際抓住原來的CSS樣式，所以你不需要保存它。 即使顏色為藍色，我也可以回去抓紅色：

c1.transition()
  .delay(5000)
  .duration(2000)
  .style("fill", function(d) { 
       var selection = d3.select(this);
       var currentStyle = selection.style("fill");
       var defaultStyle = selection.style("fill", null).style("fill");
       selection.style("fill", currentStyle");
       return defaultStyle;
 });

 var svg = d3.select("svg"); var c1 = svg.append("circle") .attr("class", "red") .attr("r", 25) .attr("cx", 50) .attr("cy", 50); var c2 = svg.append("circle") .attr("r", 25) .attr("cx", 250) .attr("cy", 50) .style("fill", "red"); svg.selectAll("circle") .transition() .delay(2000) .duration(2000) .style("fill", "blue"); c1.transition() .delay(5000) .duration(2000) .style("fill", function(d) { var selection = d3.select(this); var currentStyle = selection.style("fill"); var defaultStyle = selection.style("fill", null).style("fill"); selection.style("fill", currentStyle); return defaultStyle; }); c2.transition() .delay(5000) .duration(2000) .style("fill", "red"); 

 .red { fill: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg width="500" height="500"> </svg> 

Answer 2

試試這個代碼。

var color = c1.style("fill");

 var svg = d3.select("svg"); var c1 = svg.append("circle") .attr("class", "red") .attr("r", 25) .attr("cx", 50) .attr("cy", 50); var c2 = svg.append("circle") .attr("r", 25) .attr("cx", 250) .attr("cy", 50) .style("fill", "red"); //Get fill color from css var color = c1.style("fill"); svg.selectAll("circle") .transition() .delay(2000) .duration(2000) .style("fill","blue"); c1.transition() .delay(5000) .duration(2000) .style("fill", color); c2.transition() .delay(5000) .duration(2000) .style("fill", "red"); 

 .red { fill: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg width="500" height="500"> </svg>