Javascript 鼠标悬停前查找元素的原始颜色

我有一个气泡图，其中我用以下方式制作气泡：

var circles = svg.selectAll(null)
          .data(data)
          .enter()
          .append("circle")
          .attr("cx", width / 2)
          .attr("cy", height / 2)
          .attr("opacity", 0.3)
          .attr("r", 20)
          .style("fill", function(d){
            if(+d.student_percentile <= 40){
                return "red";
            }
            else if(+d.student_percentile > 40 && +d.student_percentile <= 70){
                return "yellow";
            }
            else{
                return "green";
            }
          })
          .attr("cx", function(d) {
            return xscale(+d.student_percentile);
          })
          .attr("cy", function(d) {
            return yscale(+d.rank);
          })
          .on('mouseover', function(d, i) {
            d3.select(this)
              .transition()
              .duration(1000)
              .ease(d3.easeBounce)
              .attr("r", 32)
              .style("fill", "orange")
              .style("cursor", "pointer")
              .attr("text-anchor", "middle");
               texts.filter(function(e) {
                    return +e.rank === +d.rank;
               })
              .attr("font-size", "20px");
            }
           )
          .on('mouseout', function(d, i) {
            d3.select(this).transition()
              .style("opacity", 0.3)
              .attr("r", 20)
              .style("fill", "blue")
              .style("cursor", "default");
              texts.filter(function(e) {
                return e.rank === d.rank;
              })
            .transition()
            .duration(1000)
            .ease(d3.easeBounce)
            .attr("font-size", "10px")
          });

var circles=svg.selectAll（空）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，宽度/2）
.attr（“cy”，高度/2）
.attr（“不透明度”，0.3）
.attr（“r”，20）
.样式（“填充”，功能（d）{
如果（+d.student_百分位40&&+d.student_百分位有几种方法可以做到这一点

解决方案1:

最明显的是声明一个变量

var previous;

…您在
鼠标上方指定给元素颜色的

 previous = d3.select(this).style("fill");

…并在
mouseout
中重复使用：

d3.select(this).style("fill", previous)

下面是一个演示：


var svg=d3.选择（“svg”）；
var colors=d3.scaleOrdinal（d3.schemeCategory 10）；
var-previous；
var circles=svg.selectAll（空）
.数据（d3.范围（5））
.输入（）
.附加（“圆圈”）
.attr（“cy”，75）
.attr（“cx”，函数（d，i）{
返回50+50*i
})
.attr（“r”，20）
.样式（“填充”，功能（d，i）{
返回颜色（一）
})
.on（“鼠标悬停”，函数（）{
previous=d3.选择（此）.style（“填充”）；
d3.选择（这个）样式（“填充”、“#222”）；
}).on（“mouseout”，函数（）{
d3.选择（此）.样式（“填充”，上一个）
})