D3工具提示不顯示

Question

我在改變工具提示所用元素的顏色時顯示工具提示問題。我可以註釋掉工具提示代碼，筆畫的顏色會隨着元素而改變，但我需要提示工具提示和類更改。任何幫助是極大的讚賞。下面是我所說的：

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", ...)的後續調用覆蓋你設置什麼有以前。要結合幾件事情，在處理函數中執行它們全部：

.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(); 
});