【问题标题】:How to convert Data table to tree json format dynamically?如何将数据表动态转换为树 json 格式?
【发布时间】:2018-11-15 06:07:44
【问题描述】:

我正在使用此数据输入来创建 D3.js 可视化:

Tree Layout

好的,现在我的数据输入是一个我已经硬编码的 json 文件:

{
    "name":"Fun",
    "children": [
        {
            "name": "Legal",
            "children": [
                { "name": "Adventure" },
                { "name": "Movie" },
                { "name": "M&m" }
            ]
        },
        {
            "name": "frowned upon",
            "children": [
                { "name": "recreational stuff" },
                { "name": "religious views" }
            ]
        }
    ]
}

但我的数据输入实际上是:



我如何将此数据表动态转换为上述 Json 格式,我是否编写一个解析数据表以将其转换为上述格式的函数,或者还有其他方法。

【问题讨论】:

    标签: javascript json d3.js data-visualization


    【解决方案1】:

    您可以编写递归函数来重构数据。

    const a = [[
      'fun', 'legal', 'adventure',
    ], [
      'fun', 'legal', 'movie',
    ], [
      'fun', 'legal', 'm&m'
    ], [
      'fun', 'frowned upon', 'rec stuff'
    ], [
      'fun', 'frowned upon', 'religius views'
    ]];
    
    let t = [];
    
    const addLeaf = (array) => {
      if (!array || !array.length) return;
    
      let temp = { name: array[0], children: [] };
    
      if (array.length > 1) {
        temp.children = [addLeaf(array.slice(1))];
      }
    
      return temp;
    };
    
    const addToTree = (tree, array) => {
      if (!array || !array.length) return [];
    
      const branchIndex = tree.findIndex(entry => entry.name === array[0]);
    
      if (branchIndex !== -1) {
        tree[branchIndex].children = [...addToTree(tree[branchIndex].children, array.slice(1))];
      } else {
        tree = [...tree, addLeaf(array)];
      }
    
      return tree;
    };
    
    a.forEach((entry) => {
      t = addToTree(t, entry);
    });
    
    console.log(JSON.stringify(t, null, 2))

    【讨论】:

      【解决方案2】:

      var test = new function() {
      
        var table = [
          ['fun', 'legal', 'adventure'],
          ['fun', 'legal', 'mvie'],
          ['fun', 'legal', 'M&M'],
          ['fun', 'Frowned upon', 'Rec stuff'],
          ['fun', 'Frowned upon', 'Regligious views']
        ];
      
        var res = [];
      
        this.init = function() {
          for (var i = 0; i < table.length; i++) {
            var curRow = table[i];
            test.myAddFun(res, curRow, 0);
          }
          console.log(res);
        };
      
        this.myAddFun = function(_res, arr, startIndex) {
          var addedToJSON = false;
          for (var i = 0; i < _res.length; i++) {
            var curJSON = _res[i];
            if (curJSON['name'] == arr[startIndex]) {
              if (startIndex < arr.length - 1) {
                test.myAddFun(curJSON['children'], arr, startIndex + 1);
              }
              addedToJSON = true;
              break;
            }
          }
          if (addedToJSON) {
            return;
          }
          var curJSON = {};
          curJSON['name'] = arr[startIndex];
          if (startIndex < arr.length - 1) {
            curJSON['children'] = [];
            test.myAddFun(curJSON['children'], arr, startIndex + 1);
          }
          _res.push(curJSON);
          return;
        };
      
      };
      test.init();

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-02-27
        • 1970-01-01
        • 2011-10-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-08-05
        • 1970-01-01
        相关资源
        最近更新 更多