从父子数据表中创建对 D3 友好的 JSON答案

【问题标题】：Create D3-friendly JSON out of Parent Child table of data从父子数据表中创建对 D3 友好的 JSON
【发布时间】：2014-08-19 19:47:06
【问题描述】：

我正在尝试构建基于父子关系划分数据的 D3 可视化。
http://blog.luzid.com/2013/extending-the-d3-zoomable-sunburst-with-labels/ 这些示例中使用的 JSON 遵循与此类似的模式：

var flare = {
    "name": "family",
    "size": 2000,
    "children": [{
        "name": "kidWithoutKids",
        "size": 100
    }, {
        "name": "kidWithKids",
        "size": 1900,
        "children": [{
            "name": "grandkidWithoutKids",
            "size": 100
        }, {
            "name": "grandkidWithKids",
            "size": 1900,
            "children": [...and so on...]
        }]
    }]
}

我需要做的是获取一组表格数据并将其转换为该格式的 JSON 对象。因此，我输入的数据（我无法更改）如下所示：

var arrayChildParent = [
    [{"thisText":"family"},{"thisText":"-"},{"thisNum":2000}],
    [{"thisText":"kidWithoutKids"},{"thisText":"family"},{"thisNum":100}],
    [{"thisText":"kidWithKids"},{"thisText":"family"},{"thisNum":1900}],
    [{"thisText":"grandkidWithoutKids"},{"thisText":"kidWithKids"},{"thisNum":100}],
    [{"thisText":"grandkidWithKids"},{"thisText":"kidWithKids"},{"thisNum":1800}],
  ..... and so on
]

所以，你可以把它想象成一张有 Child | 的桌子。家长 |尺寸。显然，如果有这样一个函数就好了：

var flare = createJSON(arrayChildParent);

数据可以按任何顺序输入，因此我一直很难构建一个循环遍历数据并创建 JSON 树的递归函数，但有时我可能有一个孩子，其父级的父级没有尚未创建。我还尝试先循环创建父母或父母与父母的索引，但管理起来非常困难。

现在，我想知道我是不是走错了路。有没有更简单的方法来简单地将我拥有的数组数据集加载到 D3 中以在树结构中使用？

任何帮助将不胜感激。谢谢！

【问题讨论】：

那么你为什么不展示你所尝试的并解释出了什么问题呢？
您可能希望将族用作键，然后将所有其他数据用作嵌套键值（进一步嵌套）。这里有一些想法：bl.ocks.org/phoebebright/raw/3176159

标签： javascript arrays json d3.js sunburst-diagram

【解决方案1】：

这是您可以完成此任务的一种方法。

第一步是稍微清理一下数据，这样它就足够合理了。您可以使用Array.map() 来遍历数据并使每个数据成为一个对象：

var cleanData = arrayChildParent.map(function(d) {
  return {
    name: d[0].thisText,
    parent: d[1].thisText,
    size: d[2].thisNum
  };
});

然后你需要一个函数来查找所有parent 是给定name 的数据点，然后递归地找到它们的孩子。这很容易通过使用Array.filter() 和Array.map() 来完成：

function getChildren(name) {
  return cleanData.filter(function(d) { return d.parent === name; })
    .map(function(d) {
      return {
        name: d.name,
        size: d.size,
        children: getChildren(d.name)
      };
    })
}

您的flare 变量就是在- 上调用getChildren 的第一个结果

var flare = getChildren('-')[0];

编辑：

或者，格式化为您在问题中提到的单个函数：

var flare = createJSON(arrayChildParent);

function createJSON(yuckyData) {

  var happyData = yuckyData.map(function(d) {
    return {
      name: d[0].thisText,
      parent: d[1].thisText,
      size: d[2].thisNum
    };
  });

  function getChildren(name) {
    return happyData.filter(function(d) { return d.parent === name; })
      .map(function(d) {
        return {
          name: d.name,
          size: d.size,
          children: getChildren(d.name)
        };
      });
  }

  return getChildren('-')[0];
}

【讨论】：