将样式转换回 CSS 默认值

Question

我正在研究一些D3可视化，我发现我必须在代码中定义很多样式 - 我真的希望在我的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>