D3.js v4填充地图Tooltip失效：科罗拉多州县数据关联及量产问题

It sounds like the main roadblock here is missing a shared unique identifier between your Shapefile and CSV to connect county boundaries with their nomination counts. The standard fix for this is using FIPS codes (the unique 5-digit identifier for US counties)—here's a step-by-step approach to get your tooltip working and handle ongoing CSV updates:

1. Check for Shared Identifiers (FIPS Codes) #

First, verify if your Shapefile JSON includes a FIPS or GEOID property (most US county datasets do, even if they omit names). Add a quick log to inspect the feature properties:

d3.json("viz.maps.uscountyurl").then(geoData => {
  console.log(geoData.features[0].properties); // Look for FIPS, GEOID, or similar
});

If you see a FIPS code (e.g., "08001" for Adams County, CO), that's your join key. If not, you may need to switch to a Shapefile that includes FIPS codes (they're the most reliable way to link county data).

2. Add FIPS Codes to Your CSV (If Missing) #

Your CSV has county names, so you can map these to Colorado's county FIPS codes using a static lookup object (county FIPS rarely changes, so this is safe to hardcode):

// Colorado county name → FIPS code mapping (complete this for all CO counties)
const coCountyFips = {
  "Adams": "08001",
  "Arapahoe": "08005",
  "Boulder": "08013",
  "Denver": "08031",
  // ... add the rest of Colorado's 64 counties
};

// Load and enhance your CSV data
d3.csv("nominations.csv").then(csvData => {
  csvData.forEach(row => {
    row.fips = coCountyFips[row.NAME]; // Add FIPS column to each row
  });
});

3. Join the Datasets & Filter for Colorado #

Once both datasets have FIPS codes, you can merge them and filter to only keep Colorado counties (state FIPS for CO is "08", so all county FIPS start with this):

Promise.all([
  d3.json("viz.maps.uscountyurl"),
  d3.csv("nominations.csv")
]).then(([geoData, csvData]) => {
  // Enhance CSV with FIPS (as above)
  const coCountyFips = { /* ... */ };
  csvData.forEach(row => row.fips = coCountyFips[row.NAME]);

  // Filter to Colorado counties and join data
  geoData.features = geoData.features
    .filter(feature => feature.properties.FIPS.startsWith("08")) // Keep only CO
    .map(feature => {
      // Match the county to its CSV data
      const match = csvData.find(row => row.fips === feature.properties.FIPS);
      if (match) {
        // Add name and nomination count to the shapefile feature
        feature.properties.countyName = match.NAME;
        feature.properties.nominationCount = parseInt(match.Count); // Adjust to your CSV column name
      } else {
        // Handle counties with no nominations
        feature.properties.nominationCount = 0;
        feature.properties.countyName = "Unknown"; // Or use FIPS to look up if needed
      }
      return feature;
    });

  // Now your geoData has all the properties needed for the tooltip!
});

4. Fix the Tooltip #

With the joined data, your tooltip can directly access the county name and nomination count from the feature's properties:

// Tooltip setup (adjust styling to your needs)
const tooltip = d3.select("body")
  .append("div")
  .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");

// Attach tooltip to county shapes
d3.selectAll(".county-path") // Use your actual county selector
  .on("mouseover", (event, d) => {
    tooltip.style("display", "block")
      .html(`<strong>${d.properties.countyName}</strong><br>Nominations: ${d.properties.nominationCount}`)
      .style("left", `${event.pageX + 10}px`)
      .style("top", `${event.pageY - 10}px`);
  })
  .on("mouseout", () => tooltip.style("display", "none"));

5. Handle Ongoing CSV Updates #

Since your nomination data changes regularly, make sure you're loading the CSV dynamically every time the page loads (don't hardcode the data). Using d3.csv() (or a standard fetch call) will pull the latest version of your CSV each time, so you don't need to manually update the code when nominations change.

Alternative: Joining by County Name (If FIPS Isn't Available) #

If you can't get FIPS codes in your Shapefile, you can join directly by county name (since you're only focusing on Colorado, duplicate county names aren't an issue). Just replace the FIPS match with a name match:

const match = csvData.find(row => row.NAME === feature.properties.SOME_NAME_FIELD);

Note: This is less reliable long-term (if county names ever change), but works for a Colorado-only project.

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