如何始终出现D3-TIP

我有一个带有d3-tip的条形图。目前，d3-tip仅在我悬停在任何栏上时才会出现。无论鼠标事件如何

<html>
  <body>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js"></script>
    <style>   
    .d3-tip {
      line-height: 1;
      padding: 6px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }
 
    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "25BC";
      position: absolute;
      text-align: center;
    }
 
    /* Style northward tooltips specifically */
    .d3-tip.n:after {
      margin: -2px 0 0 0;
      top: 100%;
      left: 0;
    }
    </style>
    <svg width="640" height="500"></svg>
    <script>
    var radii = [10, 30, 20, 4, 60, 25, 45, 11, 12];
    var svg = d3.select("svg");
    
    
    // Setup the tool tip.  Note that this is just one example, and that many styling options are available.
    // See original documentation for more details on styling: http://labratrevenge.com/d3-tip/
    var tool_tip = d3.tip()
      .attr("class", "d3-tip")
      .offset([-8, 0])
      .html(function(d) { return "Radius: " + d; });
    svg.call(tool_tip);
    
    // Now render the SVG scene, connecting the tool tip to each circle.
    var circles = svg.selectAll("circle").data(radii);
    circles.enter().append("circle")
      .attr("r", function(d) { return d; })
      .attr("cx", function(d, i) { return 50 + 50*i; })
      .attr("cy", function(d, i) { return 50 + 50*i; })
      .style("fill", "red")
      .style("stroke", "black")
      .on('mouseover', tool_tip.show)
     // .on('mouseout', tool_tip.hide);
      
    </script>
  </body>
</html>

，如果您显示了一些实现，那么您的问题将更加清楚。但是，据我了解，您已经使用d3.tip((在栏图上显示工具提示。

如果您正在调用D3-TIP，则使用DOM事件(如DOM事件(，以下D33。在条形图上选择。

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

您可以简单地不打电话给tip.hide。

请参阅此示例的附件代码段

相关内容

最新更新

热门标签：