AmCharts V4. Какое состояние по умолчанию использует AmCharts после завершения события наведения мыши?

Question

Моя цель состоит в том, чтобы иметь возможность щелкнуть по стране и залить фон этого многоугольника этой страны определенным цветом. Как только я выберу другую страну, предыдущий фон должен вернуться к стандартному цвету.

Как воспроизвести ошибку: нажмите на страну на коде, а затем нажмите на другую страну. Теперь наведите курсор мыши на первый, и он все еще будет "активным".

Это работает, когда я нажимаю только на страну, однако после наведения на страну он будет использовать определенный цвет вместо стандартного цвета (как если бы он был выбран).

Вот кодовая ручка: https://codepen.io/ms92o/pen/KBXqLO

А вот конкретные фрагменты кода, которые я создал:

Я думаю, что проблема возникает из состояния, которое страна получает после того, как эффект наведения закончился. Я думал, что будет использоваться состояние по умолчанию, которое я предоставил стандартным цветом заливки.

var selectedPolygon;
polygonTemplate.events.on("hit", function(ev) {
let polygon = ev.target;
if(selectedPolygon) {
 selectedPolygon.defaultState.properties.fill = am4core.color("#74B266");
 selectedPolygon.setState('default');
}
polygon.setState('active');
selectedPolygon = polygon;
})

/* Create hover state and set alternative fill color */
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

/* Create active state and set fill different fill color */
var as = polygonTemplate.states.create("active");
as.properties.fill = am4core.color("#FF0000");

Поэтому мой вопрос: в каком состоянии находится многоугольник после эффекта наведения?

Answer 1

Обычно при наведении спрайт возвращается в состояние по умолчанию.

В этом случае поведение было неожиданным, потому что это пользовательское состояние, "active", на самом деле является зарезервированным именем государства. Он используется при выборе полигонов на других графиках, как вы делаете здесь. Вместо возврата к значению по умолчанию, он возвращается к активному. Чтобы избежать путаницы между зависанием, состоянием по умолчанию и активным состоянием, новое состояние "hoverActive" был введен в бета-версии 45.

Если мы изменим имя / ключ состояния на что-то другое, мы обнаружим, что поведение более ожидаемое, поэтому рефакторинг "active" из вашего кода с некоторым произвольным ключом обратно мы получаем:

var customActiveState = "selectedCountry";
var selectedPolygon;
polygonTemplate.events.on("hit", function(ev) {
  /* NEW: Create an active state and set fill color to red */
  let polygon = ev.target;
  if(selectedPolygon) {
     selectedPolygon.defaultState.properties.fill = am4core.color("#74B266");
     selectedPolygon.setState('default');
  }
  polygon.setState(customActiveState);
  selectedPolygon = polygon;
})

/* Create hover state and set alternative fill color */
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

/* Create active state and set fill different fill color */
var as = polygonTemplate.states.create(customActiveState);
as.properties.fill = am4core.color("#FF0000");

Пример: https://codepen.io/team/amcharts/pen/477e8a80e09b4bf87128cd72cc082741

Но это не очень полезно, так как мы теряем красный цвет, как только вы всплывете.

Итак, есть несколько маршрутов, которые мы можем выбрать, более простой способ - как использовать зарезервированное активное состояние и заставить его работать на вас, или просто управлять defaultState почти так же, как вы это делали.

Метод 1 - Использование togglable а также isActive свойства Sprite (которые расширяют MapPolygons).

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

var selectedPolygon;
polygonTemplate.events.on("hit", function(ev) {
  /* NEW: Create an active state and set fill color to red */
  let polygon = ev.target;
  if(selectedPolygon && selectedPolygon !== polygon) {
     selectedPolygon.isActive = false;
  }
  selectedPolygon = polygon;
})

/* Create hover state and set alternative fill color */
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

/* Create active state and set fill different fill color */
var as = polygonTemplate.states.create("active");
as.properties.fill = am4core.color("#FF0000");

Пример: https://codepen.io/notacouch/pen/259c803601ff6f286a294d1477f022ba

Способ 2. Опустите все пользовательское активное состояние, возьмите код, который у вас уже есть, и переопределите заполнение как нового выбранного многоугольника, так и заполнения его состояния по умолчанию (мы должны переопределить текущую заливку, потому что, если вы просто переопределите заливку defaultState, вы придется подождать, пока ты не повернись, чтобы увидеть это)

var selectedPolygon;
polygonTemplate.events.on("hit", function(ev) {
  /* NEW: Create an active state and set fill color to red */
  let polygon = ev.target;
  if(selectedPolygon) {
     selectedPolygon.defaultState.properties.fill = am4core.color("#74B266");
     selectedPolygon.setState('default');
  }
  polygon.defaultState.properties.fill = polygon.fill = am4core.color("#FF0000");
  selectedPolygon = polygon;
})

/* Create hover state and set alternative fill color */
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

Пример: https://codepen.io/team/amcharts/pen/67121e27c3c1d50d669bca0ed040f746