将样式转换回 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

试试这个代码。

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>

Answer 2

因此，使用 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>

将样式转换回 CSS 默认值

Transitions styles back to CSS defaults

javascript

css

d3.js