D3.js多折线图中悬停获取所有Y值的更优实现方案

Great question! Your idea of binding the cities data directly to the focus group is absolutely feasible—and it’s actually a great step toward cleaner, more maintainable D3 code. Let’s break down how to implement this, plus explore even more efficient approaches.

Your Approach: Binding Data to focus Works #

First, let’s confirm: yes, attaching .data(cities) to your focus group is a valid and efficient way to avoid manually appending text elements one by one. Here’s how to put it into practice with proper D3 data binding:

// 1. Initialize a hidden focus group
const focus = svg.append("g")
  .attr("class", "focus")
  .style("display", "none");

// 2. Bind cities data and create text elements upfront (not in mouseover!)
const focusTexts = focus.selectAll("text")
  .data(cities)
  .enter()
  .append("text")
  .attr("dy", (d, i) => `${i * 1.2}em`) // Vertical spacing between city labels
  .style("font-size", "12px")
  .style("fill", "#333");

// 3. Update content/position on mouseover
svg.on("mousemove", function(event) {
  const [mouseX] = d3.pointer(event);
  const x0 = xScale.invert(mouseX);
  const bisect = d3.bisector(d => d.date).left;
  const idx = bisect(data, x0, 1);
  const d0 = data[idx - 1];
  const d1 = data[idx];
  const targetData = x0 - d0.date > d1.date - x0 ? d1 : d0;

  // Update all text content in one go
  focusTexts.text(city => `${city.name}: ${targetData[city.valueKey]}`);

  // Move the entire focus group (no need to adjust each text's position!)
  focus.attr("transform", `translate(${xScale(targetData.date)}, ${yScale(targetData[cities[0].valueKey]) - 60})`)
    .style("display", null);
});

// Hide on mouseout
svg.on("mouseout", () => focus.style("display", "none"));

This approach eliminates the need to re-select or append elements during mouseover—all text elements are created once upfront, and we only update their content and the group’s position when the user hovers. It’s clean, performant, and aligns with D3’s core data-binding principles.

Even More Efficient: Use an HTML Tooltip #

If you want to simplify further, consider using an HTML <div> for your tooltip instead of SVG text elements. This lets you display all Y-values in a single container, no need to bind multiple text elements:

// 1. Create a hidden HTML tooltip
const tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("position", "absolute")
  .style("background", "#fff")
  .style("padding", "8px 12px")
  .style("border", "1px solid #ddd")
  .style("border-radius", "4px")
  .style("display", "none")
  .style("pointer-events", "none");

// 2. Update tooltip content on mouseover
svg.on("mousemove", function(event) {
  const [mouseX, mouseY] = d3.pointer(event);
  const x0 = xScale.invert(mouseX);
  const bisect = d3.bisector(d => d.date).left;
  const idx = bisect(data, x0, 1);
  const d0 = data[idx - 1];
  const d1 = data[idx];
  const targetData = x0 - d0.date > d1.date - x0 ? d1 : d0;

  // Build tooltip content from cities data
  const tooltipContent = cities.map(city => 
    `<p><strong>${city.name}:</strong> ${targetData[city.valueKey]}</p>`
  ).join("");

  // Position and show the tooltip
  tooltip.html(tooltipContent)
    .style("left", `${event.pageX + 10}px`)
    .style("top", `${event.pageY - 10}px`)
    .style("display", "block");
});

// Hide on mouseout
svg.on("mouseout", () => tooltip.style("display", "none"));

This method is even more lightweight—you only manage one DOM element, and styling with CSS is far more flexible than SVG text. It’s ideal if you don’t need the tooltip to be part of the SVG canvas itself.

Key Takeaways #

• Your initial idea is solid: binding cities data to the focus group avoids repetitive DOM operations during mouseover.
• For maximum efficiency, update the entire group’s position instead of adjusting each text element individually.
• If flexibility is a priority, an HTML tooltip simplifies code and styling while maintaining performance.

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