从数据的Parent - Child表中创建3d友好的JSON

Create D3-friendly JSON out of Parent Child table of data

本文关键字：3d 创建 JSON 数据 Parent Child      更新时间：2023-09-26

我试图建立一个基于父子关系划分出数据的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 | Parent | Size的表。显然，如果有这样一个函数就太好了: 
var flare = createJSON(arrayChildParent);

数据可以以任何顺序进入，所以我一直在构建一个递归函数来循环遍历数据并创建JSON树，但有时我可以有一个父节点有一个尚未创建的父节点的子节点。我也试过先循环创建一个parent的索引或者parent的索引，但是很难管理。

现在，我想知道我是否走错了路。是否有一种更简单的方法可以简单地将我拥有的数组数据集加载到D3中以用于树形结构?

任何帮助都将非常感激。谢谢!

有一种方法可以做到这一点。

第一步是稍微清理一下数据，这样就足够明智了。您可以使用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];
}
相关文章：