Question

我有d3-tip的条形图。目前，d3-tip仅在我将鼠标悬停在任意栏上时显示。无论鼠标事件如何，我怎样才能让它们随时出现。

Answer 1

<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.select之后使用以下DOM事件调用d3-tip。

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

你只是不能打电话给tip.hide。

请参阅附件This example

的代码段

如何让d3-tip始终出现？

1 个答案: