0
243
Vistas¿Es posible aplicar los cambios de clase a un elemento de selection.classed() en d3.js, o establecer un valor de propiedad CSS relativo a su valor actual?
Estoy usando d3.js para agregar y quitar clases a una selección de elementos en los eventos mouseOver() y mouseOut(). Me gustaría hacer que la clase sea "isHovered" y hacer que los valores de los atributos que estoy cambiando sean relativos al valor actual del elemento. Algo como esto:
function handleMouseOver(d, i) { d3.selectAll('.classToSelect') .classed('isHovered', 'true'); }; function handleMouseOut(d, i) { d3.selectAll('.classToSelect') .classed('isHovered', 'false'); };y haga que la clase isHovered cambie el tamaño/color de los elementos:
.isHovered { height:height*1.5; width:width*1.5; background-color:yellow; }Esto agrega la clase, pero en realidad no realiza ningún cambio en los atributos de los elementos, excepto su classList. Estoy tratando de asignar y anular la asignación de la clase "isHovered", en lugar de tener que almacenar el tamaño/color previamente desplazado, y actualizarlos manualmente, y luego volver manualmente a ellos, lo que no creo que sea posible ya que estos elementos se dimensionan dinámicamente mediante datos de escala d3.js:
Entonces, ¿puedo hacer que estos cambios de clase recién agregados surtan efecto y el efecto puede ser relativo a los valores actuales de las propiedades de un elemento?
Alternativamente:
¿Es posible acceder a las propiedades y valores de width:svgAnimatedWidth y Height:svgAnimatedHeight del elemento directamente, de modo que pueda cambiarlos y revertirlos manualmente? ¿Cómo?
1 Respuestas
Responde la pregunta0
Hay varias formas de alterar la altura/anchura al pasar el mouse.
Este fragmento usa variables CSS para establecer la altura y el ancho iniciales en una clase y luego las usa para calcular nuevos valores en la clase 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>También es posible alterar variables CSS usando JS style.setProperty y leerlas usando style.getPropertyValue.
Como una alternativa completa, si el objetivo es solo aumentar la altura y el ancho de un elemento al pasar el mouse, se podría usar la escala de transformación CSS.
div { height: 100px; width: 200px; background-color: blue; } div:hover { transform: scale(1.5); background-color: yellow; } <div></div>Esto tiene la ventaja (o la desventaja, dependiendo del efecto que realmente se requiera) de no afectar el posicionamiento de los elementos circundantes.