У меня есть несколько наборов данных, подобных этому:
const server1 = [
{ date: '2019-06-15T00:22:25.000Z', online: 451 },
{ date: '2019-06-15T01:08:58.000Z', online: 499 }
];
const server2 = [
{ date: '2019-06-15T00:14:18.000Z', online: 599 },
{ date: '2019-06-15T00:58:56.000Z', online: 554 }
];
const server3 = [
{ date: '2019-06-15T00:10:18.000Z', online: 321 },
{ date: '2019-06-15T00:54:56.000Z', online: 300 }
];
Мне удалось нарисовать линейный график для каждого из них, и диаграмма выглядит так:
Но теперь я хочу нарисовать дополнительный линейный график, который объединяет данные каждого графика в отдельный график, чтобы он показывал оценку общих онлайн-номеров со всех серверов.
Я не знаю, как я мог бы справиться с этим, потому что даты (значения x) не совпадают точно, поэтому я не могу просто сложить значения.
Вот jsfiddle с кодом, который у меня есть
Обновление 1:
Вот функция, которую я собрал вместе с предложениями Coderino Javarino:
const mergeDatasets = (xPropName, yPropName, ...datasets) => {
const makeScale = dataset => {
return d3
.scaleTime()
.domain(dataset.map(obj => new Date(obj[xPropName])))
.range(dataset.map(obj => obj[yPropName]));
};
const sumOtherDataSets = (scales, object, curDataSetIndex) => {
let sum = object[yPropName];
scales.forEach((_scale, scaleIndex) => {
if (curDataSetIndex !== scaleIndex) {
sum += scales[scaleIndex](new Date(object[xPropName]));
}
});
return sum;
};
// make a scale for each dataset
const scales = datasets.map(dataset => makeScale(dataset));
/* make an new array where each datapoint is summed with the interpolated
/* counterparts from all other datasets */
let merged = [];
datasets.forEach((dataset, curDataSetIndex) => {
const summedDataset = dataset.map(object => {
const objCopy = { ...object };
objCopy[yPropName] = sumOtherDataSets(scales, object, curDataSetIndex);
return objCopy;
});
merged = [].concat(merged, summedDataset);
});
// restore the correct order by date
merged = merged.sort((a, b) => new Date(a[xPropName]) - new Date(b[xPropName]));
return merged;
};
Затем я могу легко использовать его так:
const merged = mergeDatasets("date", "online", server1, server2, server3);
Но у него есть недостаток, заключающийся в том, что общий график неверен, когда он должен интерполировать точки, выходящие за пределы конкретной области масштабов.