d3.js로 마우스 오버시 이미지 변경 방법

d3.js로 생성 된 일부 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"); }); 
        ;

출처

2014-12-29 Rok Zupančič

가능한 중복 (http://stackoverflow.com/questions/5220014/how- [마우스 롤오버 (마우스 오버)에 이미지 을 변경하는 방법] 이미지 변경 img-on-mouse-rollover-hover) –

아니요. 마우스를 올려 놓으면 다음 단계에서 자동으로 이미지 배열이 회전하기 때문에 js를 사용하고 싶습니다. –

오류가 발생했습니다 : catch되지 않은 TypeError : undefined의 'attr'속성을 읽을 수 없습니다. –

d은 노드에 바인드 된 데이터 요소입니다. this는 노드 자체입니다 :

시도 :

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

의

출처

2014-12-29 16:34:52 Mark

d3.js로 마우스 오버시 이미지 변경 방법

답변

관련 문제