如何用JavaScript转换JSON数据适配Plotly 3D聚类图表

核心思路 #

遍历原始JSON数组中的每个数据项，提取其中a、b、c三个对象的x、y、z值，分别收集到对应的数组中，最终组合成Plotly所需的结构。如果需要区分不同时间点的聚类，可以为每个时间点创建独立的trace；如果需要合并所有点，也可以将所有值整合到单个trace里。

代码实现（按时间点区分聚类） #

// 原始JSON数据
const rawData = [{
    "date": "2022-10-23 00:59:48",
    "coords": {
        "centroid_coordinates": { "lat": -7.207031, "lon": 168.596191 },
        "a": { "x": -1256364.723016, "y": -905736.587501, "z": -193874.799252 },
        "b": { "x": -386418.720754, "y": -6642.909578, "z": 23877.65777 },
        "c": { "x": -129833372.79993, "y": -66828394.94447, "z": -28968456.528255 }
    }
}, {
    "date": "2022-10-23 02:47:50",
    "coords": {
        "centroid_coordinates": { "lat": -7.17041, "lon": 141.584473 },
        "a": { "x": -1255562.609906, "y": -906938.207607, "z": -194414.791666 },
        "b": { "x": -386086.589686, "y": -12494.762637, "z": 20835.942076 },
        "c": { "x": -129735646.666749, "y": -66982246.620175, "z": -29035155.240834 }
    }
}, {
    "date": "2022-10-23 04:35:53",
    "coords": {
        "centroid_coordinates": { "lat": -7.214355, "lon": 114.528809 },
        "a": { "x": -1254758.115314, "y": -908137.954559, "z": -194955.259706 },
        "b": { "x": -385642.162129, "y": -18344.612851, "z": 17787.284227 },
        "c": { "x": -129637682.082612, "y": -67136009.866602, "z": -29101817.979109 }
    }
}];

// 转换函数：为每个时间点创建独立的聚类trace
function convertToPlotlyFormat(data) {
    const result = [];
    data.forEach(item => {
        const { a, b, c } = item.coords;
        const trace = {
            x: [a.x, b.x, c.x],
            y: [a.y, b.y, c.y],
            z: [a.z, b.z, c.z],
            mode: 'markers',
            marker: { size: 6 },
            name: item.date // 用日期标记系列，方便图例区分
        };
        result.push(trace);
    });
    return result;
}

// 生成Plotly可用的数据
const plotlyData = convertToPlotlyFormat(rawData);
console.log(plotlyData);

代码实现（合并所有聚类点） #

如果不需要区分时间点，只想把所有a、b、c的点放在同一个系列里，可以用这个版本：

function mergeAllPoints(data) {
    const x = [];
    const y = [];
    const z = [];
    data.forEach(item => {
        const { a, b, c } = item.coords;
        x.push(a.x, b.x, c.x);
        y.push(a.y, b.y, c.y);
        z.push(a.z, b.z, c.z);
    });
    return [{ x, y, z, mode: 'markers' }];
}

const mergedPlotlyData = mergeAllPoints(rawData);
console.log(mergedPlotlyData);

新手提示 #

• 可以直接把生成的plotlyData或mergedPlotlyData传入Plotly的Plotly.newPlot()函数来绘制图表。
• 调整marker的size、color等属性，可以让聚类点的显示效果更符合需求。

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