时间戳

首页 > 解决方案 > 是否可以将类更改应用于 d3.js 中的 selection.classed() 元素，或者设置相对于其 currentValue 的 CSS 属性值

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

问题描述

我正在使用 d3.js 向 mouseOver() 和 mouseOut() 事件上的元素选择添加和删除类。我想让类“isHovered”并使我正在更改的属性的值与元素的当前值相关。像这样的东西：

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

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

d3.js 动态调整元素宽度

那么，我是否可以让这些新添加的类更改真正生效，效果是否与元素属性的当前值相关？

或者：

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

标签： javascripthtmlcssd3.js

解决方案

有多种方法可以改变悬停时的高度/宽度。

此代码段使用 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>

也可以使用 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>

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

推荐阅读