javascript - 如何使用 d3.js 在鼠标悬停时更改图像

Question

我有一些 svg 圆圈和图像，它们是用 d3.js 生成的。我想在鼠标悬停时更改图像而不是工具提示。

mask.append("image")
    .attr('class', "sth")
    .attr('x',-(entry.childNodes[0].getAttribute("r"))-40)
    .attr('y',-(entry.childNodes[0].getAttribute("r"))-40)
    .attr('width', 80+entry.childNodes[0].getAttribute("r")*2)
    .attr('height', 80+entry.childNodes[0].getAttribute("r")*2)
    .attr("transform", entry.childNodes[0].getAttribute("transform"))
    .attr('clip-path', 'url(#'+('clip'+clipPathId)+')')
    .attr("xlink:href", imageUrl)
    .on("click", function(d) { 
          zoom(d);                           
          d3.event.stopPropagation(); 
    })
    .on("mouseover", function(d){ d.attr("xlink:href", "img/001.jpg"); tooltip.style("visibility", "visible"); tooltip.html("<img src='"+imageUrl+"'/>"); })
    .on("mousemove", function(){ tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); })
    .on("mouseout", function(){ tooltip.style("visibility", "hidden"); }); 
                    ;

Answer 1

d 是绑定(bind)到节点的数据元素。 this 是节点本身:

尝试:

.on("mouseover", function(d){ 
    d3.select(this).attr("xlink:href", "img/001.jpg");
})