javascript - 在堆积面积图的狭窄区域隐藏标签（D3 Observable）

Question

我正在 Observable 中制作一个 100% 堆积面积图，每个系列都有标签，但我有很多系列，想隐藏太小而无法显示的系列的标签（目前它们都被压在每个系列的顶部）其他）。有人能就我如何做到这一点提供建议吗？

我创建了一个 if else 语句，并且知道我需要以某种方式说，如果该值低于总数的某个份额，则不要显示标签，但我正在努力弄清楚该语句中究竟需要做什么。如果有人能够提供建议，那将非常有帮助！

当前笔记本：https ://observablehq.com/d/b981c470fa4ebddc

Answer 1

您可以预先计算每个国家/地区的总体平均值 - 请参见下面的模拟示例：

// mock up of your data, countries are a, b, c etc
const data = [
  {year: 2020, a: 1, b: 4, c: 3},
  {year: 2021, a: 6, b: 5, c: 9},
  {year: 2022, a: 4, b: 8, c: 9},
  {year: 2023, a: 8, b: 1, c: 7},
  {year: 2024, a: 2, b: 5, c: 6},
  {year: 2025, a: 7, b: 2, c: 9}
]

// threshold beneath which hide the label
const threshold = 0.27;

// countries from first data item
const countries = Object.keys(data[0]).filter(k => k != "year");

// return an object of country totals
const averages = countries.reduce((acc, curr) => {
  const sum = data.reduce((sum, obj) => sum + obj[curr], 0);
  acc.push({country: curr, sum: sum});
  return acc;
}, []); 

// get grand total for each country
const grandTotal = averages.reduce((sum, obj) => sum + obj.sum, 0);

// calculate average and show flag
averages.forEach(obj => {
  let avg = obj.sum / grandTotal;
  obj.avg = avg;
  obj.show = avg >= threshold;
});

console.log(averages);

然后，您可以将show属性附加到series笔记本中的对象，例如

series.forEach(obj => obj.show = averages.find(avg => avg.country === series.key).show)

然后在您的标签渲染部分：

.text((d, i) => d.show ? d.key : "")