Question

我正在处理一些D3可视化，我发现的是我必须在我的代码中定义很多样式 - 我真的很喜欢我希望只在我的CSS。

这样做的原因只是为了支持过渡。我发现我可以运行从CSS中应用的样式到内联样式的转换，但之后我无法将该样式移回原始样式。相反，所有这些都需要在线。如下例所示：

＆＃13;

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

＆＃13;

.red { 
   fill: red;  
}

＆＃13;

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

＆＃13;

左边的圆圈直接跳回红色，而右边的圆圈则向后跳转。

我想要做的是将左侧圆圈转换回来，而不必重新定义我在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;
 });

＆＃13;

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

＆＃13;

.red { 
   fill: red;  
}

＆＃13;

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

＆＃13;

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>

转换样式返回CSS默认值

2 个答案: