Можно ли применить изменения класса к элементу selection.classed() в d3.js, или установить значение свойства CSS относительно его текущего значения

ProgramBox

Можно ли применить изменения класса к элементу selection.classed() в d3.js, или установить значение свойства CSS относительно его текущего значения

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #d3.js

Вопрос:

Я использую d3.js чтобы добавлять и удалять классы к выбранным элементам в событиях mouseOver() и mouseOut (). Я хотел бы сделать класс «открытым» и сделать так, чтобы значения атрибутов, которые я изменяю, были относительно текущего значения элемента. Что-то вроде этого:

 function handleMouseOver(d, i) {
        d3.selectAll('.classToSelect')
        .classed('isHovered', 'true');
};
function handleMouseOut(d, i) {
        d3.selectAll('.classToSelect')
        .classed('isHovered', 'false');
};

и заставьте класс isHovered изменить размер/цвет элементов:

 .isHovered {
    height:height*1.5;
    width:width*1.5;
    background-color:yellow;
}

Это добавляет класс, но на самом деле не вносит никаких изменений в атрибуты элементов, кроме его списка классов. Я пытаюсь назначить и отменить назначение класса «isHovered», вместо того, чтобы хранить предварительно измененный размер/цвет и вручную обновлять их, а затем вручную возвращаться к ним, что, по моему мнению, невозможно, поскольку эти элементы динамически изменяются по d3.js масштабирование данных:

Итак, могу ли я сделать так, чтобы эти недавно добавленные изменения класса действительно вступили в силу, и может ли эффект быть связан с текущими значениями свойств элемента?

Альтернативно:

Можно ли напрямую получить доступ к свойствам и значениям элемента width:svgAnimatedWidth и Height:svgAnimatedHeight, чтобы я мог изменить их и вернуть обратно вручную? Как?

1. На данный момент я использую: .attr («ширина», (d3.выберите(это).узел().ширина.значение)*1.5 ) для получения текущей ширины и установки новой ширины на основе этого для выбранных элементов. Я делаю обратное при наведении курсора мыши.

2. Вы рассматривали возможность использования CSS-переменных?

3. Я этого не сделал, но из моего беглого чтения только что похоже, что это в основном просто заполнитель? Если бы я мог динамически изменять значение переменной, это было бы идеально.

4. JS может изменять переменные.

5. И эти изменения отразятся на всех элементах класса? Прямо сейчас я могу назначить элементу новый класс в их списке классов, но свойства этого класса не применяются к элементам.

Ответ №1:

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

Этот фрагмент использует переменные CSS для задания начальной высоты и ширины в классе, а затем использует их для вычисления новых значений в классе isHovered.

 const div = document.querySelector('div');
div.addEventListener('mouseover', function() {
  div.classList.add('isHovered');
});
div.addEventListener('mouseout', function() {
  div.classList.remove('isHovered');
});

 div {
  --h: 100;
  --w: 200;
  height: calc(var(--h) * 1px);
  width: calc(var(--w) * 1px);
  background-color: blue;
}

.isHovered {
  --hhovered: calc(var(--h) * 1.5);
  --whovered: calc(var(--w) * 1.5);
  height: calc(var(--hhovered) * 1px);
  width: calc(var(--whovered) * 1px);
  background-color: yellow;
}

 <div></div>

Также можно изменять переменные CSS с помощью JS style.setProperty и считывать их с помощью style.GetPropertyValue.

В качестве полной альтернативы, если цель состоит в том, чтобы просто увеличить высоту и ширину элемента при наведении, можно использовать масштаб преобразования CSS.

 div {
  height: 100px;
  width: 200px;
  background-color: blue;
}

div:hover {
  transform: scale(1.5);
  background-color: yellow;
}

 <div></div>

Это имеет то преимущество (или недостаток, в зависимости от того, какой эффект на самом деле требуется), что не влияет на расположение окружающих элементов.