Javascript 如何在悬停画布上展开图像？

在这个例子中，我非常喜欢图像在悬停时的展开方式。我知道如何使用jquery实现这一点，但我也知道它不会那么快和可靠。我可以尝试使用d3js，但我对它真的很陌生，知道我可以从哪里开始或其他可行的替代方案吗

谢谢

试试这个：

html:

然后，可以使用javascript将图像添加到div中

---

---

祝你好运NYT示例的响应性可能来自于使用单个画布（或少量画布）而不是一堆HTML或SVG节点，而不是使用d3而不是jQuery。不过，这个例子确实使用了d3。您可以通过查看源代码查看所有代码；它就在那里，在未缩小的js中。例如，页面源的行

897

是一个大循环的一部分，它将当前图像绘制到画布中。你说得对！！你应该将此作为答案发布！这是他们所做的伟大工作的一把小提琴，谢谢！别担心。只是好奇：你能通过复制/粘贴js并包括d3来组装JSFIDLE吗？没有其他依赖项？没有别的，它只需要d3和图像

<div style = "display:inline;" id = "imgBar">
</div>

#imgBar{
//CSS here
}

#imgBar > img:hover{
width:200px; //Just set the width to double it's default value
height:200px; //Same as above; 200px is just a dummy value
}