是否可以将 class 更改应用于 d3.js 中 selection.classed() 的元素，或者设置相对于其 currentValue 的 CSS 属性 值

Question

我正在使用 d3.js 在 mouseOver() 和 mouseOut() 事件上向选定元素添加和删除 classes。我想使 class 为“isHovered”，并使我要更改的属性的值相对于元素的当前值。像这样：

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

并使 isHovered class 更改元素 size/color:

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

这添加了 class，但实际上并没有对元素属性进行任何更改，除了它的 classList。我正在尝试分配和取消分配“isHovered”class，而不是必须存储预先悬停的 size/color，然后手动更新它们，然后手动恢复它们，我不这样做认为这是不可能的，因为这些元素是通过 d3.js 缩放数据动态调整大小的：

那么，我能否使这些新添加的 class 更改真正生效，并且该效果是否与元素的属性的当前值相关？

或者：

是否可以直接访问元素的 width:svgAnimatedWidth 和 Height:svgAnimatedHeight 属性和值，以便我可以更改它们并手动恢复它们？怎么样？

Answer 1

有多种方法可以改变悬停时的 height/width。

此代码段使用 CSS 变量在 class 中设置初始高度和宽度，然后使用它们计算 isHovered class 中的新值。

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>

也可以使用 JS style.setProperty 更改 CSS 变量并使用 style.getPropertyValue 读取它们。

作为一个完整的替代方案，如果目的只是增加悬停时元素的高度和宽度，那么可以使用 CSS 变换比例。

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

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

<div></div>

这样的优点（或缺点，取决于实际需要的效果）不影响周围元素的定位。