web-dev-qa-db-ja.com

フラットjsonから（マルチレベル）flare.jsonデータ形式を生成する

私は次のようなフラットなjsonファイル構造を持っています：

[
 { "name" : "ABC", "parent":"DEF", "relation": "ghi", "depth": 1 },
 { "name" : "DEF", "parent":"null", "relation": "null", "depth": 0 },
 { "name" : "new_name", "parent":"ABC", "relation": "rel", "depth": 2 }
 ....
 ....
 ]

そして私が欲しいのは次のようなネストされたファイル構造です：

[ 
 {
   "name": "DEF",
   "parent": "null",
   "relation": "null",
   "children": [
                 { "name": "ABC",
                   "parent": "DEF",
                   "relation": "ghi",
                   "children": [
                                 "name": "new_name",
                                 ...
                                 "children": []
                               ]
                 }
               ]
  }
 ]

いくつのレベルに到達するかについての制限はありません。現在の最大数は30です。ノードが持つことができる子の数に制限はありません。例えば。ルートノードには、残りのすべてが子ノードとして含まれます。

これまでに何を試しましたか？

  • D3.nest（）と、それがどのようにネストできるが完全ではないかについて読んでください。 https://groups.google.com/forum/?fromgroups=#!topic/d3-js/L3UeeUnNHO8/discussion

  • pythonスクリプトを記述しましたが、null値で止まっています。また、データが制限されていないため（毎日2桁で増加しています）、非常に遅いです。

  • フォースディレクテッドレイアウトを試してみましたが、うまく機能しましたが、視覚化を容易にする別のレイアウトを追加したいと考えています。

  • 私は他のpythonスクリプトを投稿することで行くことができますが、「名前」と「子供」以外の情報を引き継がないようです。

  • 私はこれを読みます： http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/ しかし、彼らも最初に正しいフォーマットデータを持っています場所。私が作成するつもりは http://bl.ocks.org/mbostock/433908 です。

データのソースはMS SQL Serverデータベースで、Pythonを介してフェッチおよび解析しています。親切に助けてください！私は過去2週間これで立ち往生しています。

ありがとう

javascriptjsond3.jsnested
24
synaptikon

JavaScriptでの1つの実装は次のとおりです。 http://jsfiddle.net/9FqKS/

まず、名前ベースのマップを作成して簡単に検索できます。これを行うにはいくつかの異なる方法があります-この場合、私は.reduceメソッド。空のオブジェクトで開始し、data配列を反復処理して、各ノードのエントリを追加します。

// create a {name: node} map
var dataMap = data.reduce(function(map, node) {
    map[node.name] = node;
    return map;
}, {});

これは次と同等です。

var dataMap = {};
data.forEach(function(node) {
    dataMap[node.name] = node;
});

（reduceの方がエレガントだと思うことがあります。）次に、各子をその親、または親が見つからない場合はルート配列に繰り返し追加します。

// create the tree array
var tree = [];
data.forEach(function(node) {
    // find parent
    var parent = dataMap[node.parent];
    if (parent) {
        // create child array if it doesn't exist
        (parent.children || (parent.children = []))
            // add node to parent's child array
            .Push(node);
    } else {
        // parent is null or missing
        tree.Push(node);
    }
});

あなたのツリーが巨大でない限り、これは高すぎるとは思わないので、クライアント側でそれを実行できるはずです（できない場合は、データが多すぎて簡単に表示できない可能性があります）。 。

44
nrabinowitz