如何按组筛选并展示最新数据值？（D3.js处理CSV场景）

Alright, let's get this sorted. You need to group your data (like by bagel flavor) and only display the latest entry—using that converted date number where higher values mean more recent dates. Here's how to pull this off with D3.js:

Step 1: Prepare your data structure #

First, let's assume your cleaned data looks something like this (with the converted date numbers):

const bagelData = [
  { flavor: "肉桂葡萄干口味贝果", quantity: 300, dateNum: 42856 }, // 2017年5月
  { flavor: "肉桂葡萄干口味贝果", quantity: 100, dateNum: 42794 }, // 2017年3月
  { flavor: "肉桂葡萄干口味贝果", quantity: 20, dateNum: 42687 },  // 2016年11月
  { flavor: "原味贝果", quantity: 250, dateNum: 42856 },
  { flavor: "原味贝果", quantity: 180, dateNum: 42794 }
];

Step 2: Group your data by category #

Use D3's d3.group (for v7+) to cluster entries by your group key (here, the bagel flavor):

// Group data by flavor
const groupedData = d3.group(bagelData, d => d.flavor);

If you're using an older D3 version (v5 or earlier), use d3.nest instead:

const groupedData = d3.nest()
  .key(d => d.flavor)
  .entries(bagelData);

Step 3: Extract the latest entry from each group #

For each group, use d3.max to find the entry with the highest dateNum (since that's your "latest" marker). We'll map over the grouped data to create a new array with only the latest values:

For D3 v7+ #

const latestByFlavor = Array.from(groupedData, ([flavor, entries]) => {
  // Find the entry with the highest dateNum (most recent)
  const latestEntry = d3.max(entries, (a, b) => a.dateNum - b.dateNum);
  return {
    flavor: flavor,
    latestQuantity: latestEntry.quantity,
    latestDateNum: latestEntry.dateNum
  };
});

For older D3 versions #

const latestByFlavor = groupedData.map(group => {
  const latestEntry = d3.max(group.values, (a, b) => a.dateNum - b.dateNum);
  return {
    flavor: group.key,
    latestQuantity: latestEntry.quantity,
    latestDateNum: latestEntry.dateNum
  };
});

Step 4: Render the results #

Now you can take this filtered data and display it on your page. For example, creating a simple list:

// Target an existing <ul> element in your HTML
const list = d3.select("#latest-bagel-quantities");

list.selectAll("li")
  .data(latestByFlavor)
  .enter()
  .append("li")
  .text(d => `${d.flavor}: 最新库存 ${d.latestQuantity}`);

Quick Notes #

• Double-check that your date-to-number conversion is consistent—higher numbers must correspond to later dates for d3.max to work correctly.
• If multiple entries in a group have the same maximum dateNum, d3.max will return the first one it encounters. If you need to handle ties, you can add extra logic to pick the right entry.

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