Javascript 如何在D3中悬停时向图像添加边框

我使用的是D3，其中包装布局的叶子由添加的图像表示，如下所示：

svg.selectAll("image.leaves")
.data(nodes, keyFunction)
.enter().append("g")
.append("image")
.attr("class", "leaves")
.attr("xlink:href", function (d) {
     if (d.fileType == "Document")
         return "document.png";
     return "other.png";
});

我想在悬停时为该图像添加黑色边框，但我无法使用：

.leaves:hover { border: 1px solid #000; }

因为它什么都不做

---

如果有人能在正确的方向上帮助我，我们将不胜感激。

不幸的是，SVG元素不接受HTML元素所接受的相同样式属性。您可以找到SVG元素的有效样式属性列表

要制作边框，可以使用与图像尺寸相同的

元素，并将其添加到在enter选择中创建的

元素中：

//将输入的组存储为变量
var imageEnter=svg.selectAll（“.leaves”）
.数据（节点、键功能）
.enter（）.append（'g'）
.attr（'class'，'leaves'）；
//附加图像
imageEnter.append（'image'）
.attr（'xlink:href'，函数（d）{
返回d.fileType=='Document'？'Document.png'：'other.png'；
});
//追加边框矩形
imageEnter.append（'rect'）
.attr（'类'，'图像边框'）
.attr（'width'，图像的宽度）
.attr（“图像的高度”）；

现在，您可以使用css在边框矩形悬停时更改其

stroke

属性。由于它是一个

，因此当光标位于其上的任何零件上时，悬停状态将处于活动状态，即使其填充设置为透明，也不需要使用父对象的悬停状态来更改子对象的样式。很好，很简单：

。图像边框{
填充：透明；
笔画：透明；
形状渲染：边缘清晰；
}
.图像边框：悬停{
笔画：黑色；
}

---

这是一个简单的例子。

Hi@jshanley，非常感谢您提供如此详细的答案！我把它标记为正确答案，因为我可以从示例中看出它是有效的。我会试试看！