D3 툴팁이 표시되지 않음

Question

툴팁이 표시되는 요소의 색상을 변경하는 동안 툴팁을 표시하는 데 문제가 있습니다. 툴팁 코드를 주석 처리 할 수 ​​있으며 스트로크 색상이 요소에 대해 변경되지만 툴팁과 클래스 변경이 모두 필요합니다. 어떤 도움이라도 대단히 감사합니다. 저는 여기에 대해 이야기하고있는 것입니다 : .on("mouseover", ...)에

var svg = d3.select("#app_dataPlane") 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height); 


    var tip = d3.tip() 
     .attr('class', 'd3-tip') 
     .offset([-10, 0]) 
     .html(function (d) { 
      return "<strong>DPID:</strong> <span style='color:red'>" + d.name + "</span><br />" + "<strong>State:</strong> <span style='color:red'>" + d.state + "</span>"; 
     }) 

    svg.call(tip); 


    var link = svg.selectAll(".link") 
     .data(topoObj.links) 
     .enter().append("line") 
     .attr("class", "link") 
     .style("stroke-width", 2) 
     .on("mouseover", function (d) { 
      d3.selectAll(".link").classed("selectedLink", false); 
      d3.select(this).classed("selectedLink", true); 
      d3.select("#app_srcSwitch").html(d.source.name); 
      d3.select("#app_destSwitch").html(d.target.name); 
     }); 

    var node = svg.selectAll(".switch") 
     .data(topoObj.nodes) 
     .enter() 
     .append("circle") 
     .attr("r", 6) 
     .attr("stroke", "white") 
     .attr("class","switch") 
     .attr("fill", function (d) { 
      if (d.group == 1) { 
       return "#15a9ff"; 
      } else if (d.group == 2) { 
       return "#f98802"; 
      } else if (d.group == 3) { 
       return "#ca5eff"; 
      } else if (d.group == 4) { 
       return "#37a302"; 
      } else if (d.group == 5) { 
       return "#00a4b0"; 
      } else if (d.group == 6) { 
       return "#ff6054"; 
      } else if (d.group == 7) { 
       return "#7b75ff"; 
      } else if (d.group == 8) { 
       return "#b77264"; 
      } else { 
       return "#8c8c8c"; 
      } 
     }) 
     .on('mouseover', function (d) { 
      d3.selectAll(".switch").classed("selectedSwitch", false); 
      d3.select(this).classed("selectedSwitch", true); 
      d3.select("#app_stateInfo").html(d.state); 
      d3.select("#app_dpidInfo").html(d.name); 
      d3.select("#app_InstanceInfo").html(d.onosInstance);     
     }) 


     .on('mouseover', tip.show) 
     .on('mouseout', tip.hide) 


     .call(force.drag); 

Answer 1

후속 호출 이전에이 설정 한 내용을 덮어 씁니다. 여러 가지를 결합하려면 다음과 같이 처리기 함수에서 모두 실행하십시오.

.on('mouseover', function (d) { 
     d3.selectAll(".switch").classed("selectedSwitch", false); 
     d3.select(this).classed("selectedSwitch", true); 
     d3.select("#app_stateInfo").html(d.state); 
     d3.select("#app_dpidInfo").html(d.name); 
     d3.select("#app_InstanceInfo").html(d.onosInstance); 
     tip.show(); 
});