d3js는 클릭 할 때 툴팁을 유지합니다.

Question

텍스트가있어서 마우스를 올려 놓으면 팁을 표시하고 싶습니다. 이것은 성취된다. 이제 팁을 클릭 한 상태에서이 팁을 클릭하고 텍스트를 다시 클릭하면 사라집니다. 어떻게해야합니까? ... 'tip.show'는이 목적을 위해 일을 does't 것을

nodeEnter.append("text") 
     .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
     .text(function(d) { return d.name; }) 
     .style("fill-opacity", 1e-6) 
     .style("font-weight", function(d) { return d.father == undefined ? "":"bold";}) 
     .style("font-size", function(d) { return d.father == undefined ? "":"14px";}) 
     .on('mouseover', tip.show) 
     .on('mouseout', tip.hide); 

'팁'의 정의 보인다

var tip = d3.tip() 
     .attr('class', 'd3-tip') 
     .offset([-10, 0]) 
     .html(function(d) { return "index: " + d.index + "<br>other information..."; }); 

    svg.call(tip); 

감사합니다!

Answer 1

숨김 여부를 추적 할 플래그를 지정하십시오. 그런 다음 마우스 오버가 아닌 클릭 이벤트에 바인딩하십시오.

var clickFlag = false; 

nodeEnter.append("text") 
     .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
     .text(function(d) { return d.name; }) 
     .style("fill-opacity", 1e-6) 
     .style("font-weight", function(d) { return d.father == undefined ? "":"bold";}) 
     .style("font-size", function(d) { return d.father == undefined ? "":"14px";}) 
     .on('click', function(d){ 
      if(clickFlag){ 
      tip.hide(d); 
      }else{ 
      tip.show(d); 
      } 
      return clickFlag = !clickFlag; 
     })