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

Question

我有一个气泡图，我在其中按以下方式制作气泡:

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

我根据学生的百分位数为气泡指定了红色、黄色、绿色。在鼠标悬停时，我将气泡的颜色更改为“橙色”。现在的问题是，在 mouseout 上，目前我正在将气泡的颜色设置为“蓝色”，但我想为它们分配与鼠标悬停之前相同的颜色，即红色/绿色/黄色。我如何找出气泡的颜色？ 一种方法是明显检查学生的百分位数，然后根据它给出颜色(就像我最初分配的绿色/黄色/红色)，但是有没有直接的方法可以找到气泡的实际颜色？ 提前致谢!

Answer 1

有几种方法可以做到这一点。

解决方案一:

最明显的是声明一个变量...

var previous;

...您分配给 mouseover...

上元素的颜色

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

...并在 mouseout 中重用:

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

这是一个演示:

var svg = d3.select("svg");
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var previous;
var circles = svg.selectAll(null)
  .data(d3.range(5))
  .enter()
  .append("circle")
  .attr("cy", 75)
  .attr("cx", function(d, i) {
    return 50 + 50 * i
  })
  .attr("r", 20)
  .style("fill", function(d, i) {
    return colors(i)
  })
  .on("mouseover", function() {
    previous = d3.select(this).style("fill");
    d3.select(this).style("fill", "#222");
  }).on("mouseout", function() {
    d3.select(this).style("fill", previous)
  })

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

解决方案 2:

但是，D3 有一个很好的特性，称为局部变量。您只需定义本地...

var local = d3.local();

...，将其设置在鼠标悬停上:

local.set(this, d3.select(this).style("fill"));

然后，在 mouseout 上获取它的值:

d3.select(this).style("fill", local.get(this));

这是演示:

var svg = d3.select("svg");
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var local = d3.local();
var circles = svg.selectAll(null)
  .data(d3.range(5))
  .enter()
  .append("circle")
  .attr("cy", 75)
  .attr("cx", function(d, i) {
    return 50 + 50 * i
  })
  .attr("r", 20)
  .style("fill", function(d, i) {
    return colors(i)
  })
  .on("mouseover", function() {
    local.set(this, d3.select(this).style("fill"));
    d3.select(this).style("fill", "#222");
  }).on("mouseout", function() {
    d3.select(this).style("fill", local.get(this));
  })

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

解决方案 3:

由于 DDD(也称为 D3)表示数据驱动的文档，您可以使用绑定(bind)数据来获取以前的颜色。

首先，您设置它(在我的演示中，使用 colors 比例):

.style("fill", function(d, i) {
    return d.fill = colors(i);
})

然后在 mouseout 中使用它。查看演示:

var svg = d3.select("svg");
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var circles = svg.selectAll(null)
  .data(d3.range(5).map(function(d) {
    return {
      x: d
    }
  }))
  .enter()
  .append("circle")
  .attr("cy", 75)
  .attr("cx", function(d) {
    return 50 + 50 * d.x
  })
  .attr("r", 20)
  .style("fill", function(d, i) {
    return d.fill = colors(i);
  })
  .on("mouseover", function() {
    d3.select(this).style("fill", "#222");
  }).on("mouseout", function(d) {
    d3.select(this).style("fill", d.fill);
  })

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

要使用此解决方案 #3，元素的数据必须是一个对象。

PS:去掉那一堆 if...else 来设置气泡的样式。请改用秤。