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

问题描述

我正在 Observable 中制作一个带有每个系列标签的 100% 堆积面积图，但我有大量系列，并且想隐藏太小而无法显示的系列标签（目前它们都在彼此顶部）。有没有人能够就我如何做到这一点提出建议？

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

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

解决方法

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

// 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,{year: 2023,a: 8,b: 1,c: 7},{year: 2024,a: 2,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 : "")