将 Clusterfck 数组转换为 JavaScript InfoVis Toolkit json 层次结构答案

【问题标题】：Convert Clusterfck array to JavaScript InfoVis Toolkit json hierarchical将 Clusterfck 数组转换为 JavaScript InfoVis Toolkit json 层次结构
【发布时间】：2013-03-07 23:17:52
【问题描述】：

目前我正在使用 javascript 库 Clusterfck 来执行数据分组。该库生成以下格式的数组：

[
  {"canonical":[20,120,102],
   "size":1
  },
  {"canonical":[250,255,253],
   "left":{
      "canonical":[250,255,253],
      "size":1
    },
   "right":{
      "canonical":[255,255,240],
      "size":1
    },
   "size":2
  },
  {"canonical":[100,54,300],
   "size":1
  }
]

但是用于数据可视化的 javascript 库如何 D3.js 和Jit 使用如下所示的 JSON 结构：

{
    "canonical":"Pai",
    "children":[
        {"canonical":[20,120,102],  "size":1},
        {
            "canonical":[250,255,253],
            "children": [
                {"canonical":[250,255,253], "size":1},
                {"canonical":[255,255,240], "size":1}               
            ],
            "size":2
        },
        {
            "canonical":[100,54,300],
            "size":1
        }
    ]
}

我想使用 JavaScript 或 PHP 转换这些结构。谁能帮帮我？

【问题讨论】：

标签： javascript d3.js cluster-computing hierarchical-clustering infovis

【解决方案1】：

如果您只想在这些结构之间进行转换，这非常简单。见工作小提琴：http://jsfiddle.net/nrabinowitz/vuk94/

function convert(input, rootName) {
    // top level
    if (Array.isArray(input)) {
        return {
            "canonical": rootName,
            "children": input.map(convert)
        };
    }
    // node
    else {
        ['left', 'right'].forEach(function(side) {
            if (input[side]) {
                input.children = input.children || [];
                input.children.push(convert(input[side]));
                delete input[side];
            }
        });
        return input;
    }
}

这使用了一些 ECMAScript 1.5 功能（Array.isArray、forEach 和 map），但如果您使用的是 d3，那么您的目标可能是无论如何都支持此功能的浏览器。

【讨论】：