直方图鼠标悬停显示对应输入数值的技术求助

Hey Kunal, let's get that hover tooltip showing the corresponding value for your histogram bars sorted out! You don't actually need to call your draw() function in the mouseover event—instead, we'll focus on storing the value with each bar and displaying it when the user hovers. Here's a straightforward approach:

Step 1: Attach the Value to Each Bar Element #

First, make sure every bar in your histogram has its corresponding value stored somewhere accessible. The easiest way is using HTML5 data-* attributes when you generate the bars (you can integrate this into your existing draw() function):

function draw(inputValues) {
  const histogramContainer = $('#histogram');
  histogramContainer.empty(); // Clear existing bars

  inputValues.forEach(value => {
    // Calculate bar dimensions (adjust this to match your existing scaling logic)
    const barHeight = value * 12; // Example scaling factor
    const bar = $(`<div class="histogram-bar" style="height: ${barHeight}px;"></div>`);
    
    // Store the original input value in a data attribute
    bar.data('bar-value', value);
    
    histogramContainer.append(bar);
  });

  // Bind hover events AFTER generating bars to ensure all new bars are covered
  bindBarHoverEvents();
}

Step 2: Implement the Mouseover/Mouseout Logic #

Create a separate function to handle hover interactions. This keeps your code clean and ensures events are properly bound every time you regenerate the histogram:

function bindBarHoverEvents() {
  // Unbind existing events first to avoid duplicate handlers
  $('.histogram-bar').off('mouseover mouseout mousemove');

  $('.histogram-bar')
    .on('mouseover', function(e) {
      const currentValue = $(this).data('bar-value');
      
      // Create a tooltip element (you can also reuse a pre-existing hidden one)
      const tooltip = $('<div class="bar-tooltip"></div>')
        .text(`数值: ${currentValue}`)
        .appendTo('body');

      // Position tooltip near the mouse cursor
      positionTooltip(tooltip, e);

      // Update position as mouse moves over the bar
      $(this).on('mousemove', function(e) {
        positionTooltip(tooltip, e);
      });
    })
    .on('mouseout', function() {
      // Remove tooltip when mouse leaves the bar
      $('.bar-tooltip').remove();
      $(this).off('mousemove');
    });
}

// Helper function to handle tooltip positioning
function positionTooltip(tooltip, event) {
  tooltip.css({
    top: `${event.pageY + 10}px`,
    left: `${event.pageX + 10}px`,
    position: 'absolute',
    zIndex: 1000
  });
}

Step 3: Add Basic Tooltip Styling #

Add some CSS to make the tooltip look polished and readable:

.bar-tooltip {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  pointer-events: none; /* Prevent tooltip from blocking mouse events */
}

Why You Don't Need to Call draw() in Mouseover #

Your draw() function is responsible for generating the histogram itself. Calling it during mouseover would redraw the entire chart unnecessarily—this is inefficient and could cause visual flicker. The approach above focuses on retrieving the pre-stored value and displaying it directly, no redraw required.

内容的提问来源于stack exchange，提问作者Kunal