为D3美国地图添加州标签及带数值的Tooltip问题求助

Hey there! I see you're building a fun map showing pizza restaurant counts by US state, but stuck on two key features: adding state labels and getting hover tooltips to display state names and restaurant numbers. Let's fix these together with clear, actionable steps.

1. Adding State Labels to Your Map #

To add labels, you'll need to append <text> elements after drawing your state paths, using each state's geographic centroid as the text position. Here's how to integrate this into your code:

// After you've drawn your state paths (your existing path selection)
const stateLabels = svg.selectAll(".state-label")
  .data(usStates.features) // Replace with your actual geoJSON data variable
  .enter()
  .append("text")
  .attr("class", "state-label")
  .attr("x", d => path.centroid(d)[0])
  .attr("y", d => path.centroid(d)[1])
  .attr("text-anchor", "middle")
  .attr("font-size", "10px")
  .attr("fill", "#333")
  .text(d => d.properties.name); // Adjust this to match your data's state name property

Quick Notes: #

• Make sure path is your D3 geographic path generator (d3.geoPath()).
• Double-check that your geoJSON data has a property for the state name (like properties.name—adjust the accessor if your data uses a different key, e.g., d.properties.state).
• If labels overlap or are hard to read, you can add a subtle text shadow or adjust font size based on state size for better visibility.

2. Implementing Hover Tooltips #

For tooltips, we'll use a hidden HTML <div> that shows up on mouseover, updates its position as you move your mouse, and hides when you move away. Here's the full implementation:

Step 1: Add the Tooltip Div to Your HTML #

First, add this to your <body> (before your script tag):

<div id="tooltip" style="position: absolute; opacity: 0; background: white; padding: 8px; border: 1px solid #ccc; border-radius: 4px; pointer-events: none; font-size: 12px;"></div>

Step 2: Add Event Listeners to Your State Paths #

Update your state path selection to include hover events that control the tooltip:

const tooltip = d3.select("#tooltip");

// When defining your state paths:
svg.selectAll(".state")
  .data(usStates.features)
  .enter()
  .append("path")
  .attr("class", "state")
  .attr("d", path)
  // Your existing fill/styling code here
  .on("mouseover", (event, d) => {
    tooltip.transition().duration(200).style("opacity", .9);
    // Replace these properties with your actual data keys
    tooltip.html(`
      <strong>${d.properties.name}</strong><br/>
      Pizza Restaurants: ${d.properties.pizzaCount}
    `)
    .style("left", (event.pageX + 10) + "px")
    .style("top", (event.pageY - 28) + "px");
  })
  .on("mousemove", (event) => {
    tooltip.style("left", (event.pageX + 10) + "px")
    .style("top", (event.pageY - 28) + "px");
  })
  .on("mouseout", () => {
    tooltip.transition().duration(500).style("opacity", 0);
  });

Quick Notes: #

• Replace d.properties.pizzaCount with the actual property in your data that holds the number of pizza restaurants.
• The pointer-events: none on the tooltip div ensures it doesn't interfere with mouse events on the state paths.
• Adjust the position offsets (+10, -28) to make sure the tooltip doesn't cover your mouse cursor.

Quick Troubleshooting Tips #

• If labels aren't showing up: Check that your geoJSON data is properly loaded, and log path.centroid(d) to the console to verify it's returning valid coordinates.
• If tooltips aren't working: Confirm the tooltip div exists in your HTML, your data has the correct properties for state name and restaurant count, and the event listeners are attached to the state paths correctly.

Hope these fixes get your map working perfectly—happy mapping!

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