Найти оригинальный цвет элемента перед наведением мыши

Question

Найти оригинальный цвет элемента перед наведением мыши

1

У меня есть пузырьковая диаграмма, в которой я делаю пузыри следующим образом:

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

Я дал красным, желтым, зеленым цветам пузырьки, основанные на студенческом процентили. При наведении курсора мыши я меняю цвет пузыря на "оранжевый". Теперь проблема заключается в том, что на мышах в настоящее время я делаю цвета пузырьков "голубыми", но я хочу присвоить им тот же цвет, что и перед наведением курсора, т.е. Красный/зеленый/желтый. Как узнать, какой цвет, пузыри? Один из способов заключается в том, чтобы, очевидно, проверить процентиль ученика, а затем дать цвет на основе этого (например, я первоначально назначил зеленый/желтый/красный цвета), но есть ли какой-либо прямой способ найти фактический цвет пузыря? Заранее спасибо!

Yesha 28 окт. 2017, в 21:53

Источник

Теги:

javascript

d3.js

1 ответ

Ещё вопросы

Gerardo Furtado · Accepted Answer · 2017-10-28T19-43-00.000Z

Существует несколько способов сделать это.

Решение 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();

..., установите его на mouseover:

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) означает документы, управляемые данными, вы можете использовать привязку привязки для получения предыдущего цвета.

Сначала вы установите его (в моей демонстрации, используя шкалу 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 элемент datum должен быть объектом.

PS: отбросьте эту связку if...else для настройки стиля пузырьков. Используйте вместо этого масштаб.