mouseout 이벤트에서 텍스트 제거

Question

작은 문제. 막 대형 차트가 있는데 'mouseenter'의 줄에 텍스트를 표시하고 싶습니다. 잘 작동하지만 'mouseout'에서이 텍스트를 제거하고 싶습니다. 멈추지 않을 것 같습니다.

도움 주셔서 감사합니다. 첨부 다음 d3.js 스크립트

d3.selectAll("div.line") 
     .append("div") 
     .attr("class","bar") 
     .style("width", function(d){return d.occurrence /10 + "px"}) 
     .on("mouseenter", function(d) { 
      d3.select(this) 
      .append("text") 
      .text(function(d){return d.occurrence + " occurences"}); 
     }) 
     .on("mouseout", function(d) { 
      d3.select(this) 
      .select(".text").remove(); 
     }); 

Answer 1

을에 코드에서 마우스 아웃시 .text을 선택하려고합니다. 텍스트 노드가 아닌 "텍스트"클래스가있는 노드를 선택합니다. 점을 제거하십시오.

나는 mouseout 이벤트를 놓치고 우연히 두 개의 텍스트 노드를 추가하는 경우를 대비하여 아마도 "select"를 "selectall"로 변경했을 것입니다.

편집 : 코드를

http://jsfiddle.net/QbGRE/

d3.select("div.line").selectAll("div.bar") 
    .data(data, function(d) { return d.id;  }) 
    .enter() 
    .append("div").attr("class","bar") 
    .style("width", function(d){return d.occurrence /10 + "px";}) 
    .on("mouseover", function(d) { 
     d3.select(this) 
     .append("text").style("pointer-events", "none") 
     .text(function(d){return d.occurrence + " occurences";}); 
    }) 
    .on("mouseout", function(d) { 
     d3.select(this) 
     .select("text").remove(); 
    }); 

을 청소. 대신 대신 "는 .text"의 "mouseenter/마우스 아웃"

ALL 기타 사항 서보 -OFF ("텍스트")의

1. "/ 마우스 아웃 마우스 오버". 서비스가 추가 될 때
2. 스타일은 텍스트에 ("포인터 이벤트", "없음)은 별도의 마우스 이벤트의 원인을 중지합니다.
3. 추가 가짜 데이터입니다.

Answer 2

이 작업을 수행하는 가장 쉬운 방법의 관련 부분은 그하여 새 텍스트 요소에 고유 ID를 지정하고 선택하는 것입니다 :

.on("mouseenter", function(d) { 
     d3.select(this) 
     .append("text") 
     .attr("id", "myText") 
     .text(function(d){return d.occurrence + " occurences"}); 
    }) 
    .on("mouseout", function(d) { 
     d3.select("#myText").remove(); 
    });