web-dev-qa-db-ja.com

このデータをJSONの親/子構造にエンコードする方法

私はd3.jsを使用して、動物の家族（生物）（一度に最大4000）をツリーグラフとして視覚化していますが、データソースはディレクトリリストまたは名前空間オブジェクトのリストでもかまいません。私のデータは次のようになります：

json = {
    organisms:[
        {name: 'Hemiptera.Miridae.Kanakamiris'},
        {name: 'Hemiptera.Miridae.Neophloeobia.incisa'},
        {name: 'Lepidoptera.Nymphalidae.Ephinephile.rawnsleyi'},
        ... etc ...
    ]
}

私の質問は次のとおりです。 treemap などの多くのd3ビジュアライゼーションで使用される階層的な親/子データ構造に上記のデータを変換するための最良の方法を見つけようとしています（データ例についてはを参照してください） flare.json d3/examples/data /ディレクトリ内）。必要なデータ構造の例を次に示します。

{"name": "ROOT",
 "children": [
        {"name": "Hemiptera",
         "children": [
             {"name": "Miridae",
              "children": [
                  {"name": "Kanakamiris", "children":[]},
                  {"name": "Neophloeobia",
                   "children": [
                       {"name": "incisa", "children":[] }
                   ]}
              ]}
         ]},
        {"name": "Lepidoptera",
         "children": [
             {"name": "Nymphalidae",
              "children": [
                  {"name": "Ephinephile",
                   "children": [
                       {"name": "rawnsleyi", "children":[] }
                   ]}
              ]}
         ]}
    ]}
}

編集：マスター親ノードが1つしかないd3の例の構造に準拠するように、元の必要なデータ構造をすべてROOTノード内に囲みました。

私は一般的なデザインパターンを理解しようとしています。ボーナスとして、javascript、php、（またはpython）のいずれかでいくつかのソリューションを見てみたいと思います。 javascriptが私の好みです。 phpに関して：私が実際に使用しているデータは、結果をjsonとしてエンコードするphpスクリプトによるデータベースの呼び出しから取得されます。それがphpベースの回答に使用される場合、phpスクリプトのデータベース結果は順序付けられた配列です（以下を参照）。

Array
(
    [0] => Array
        (
            ['Rank_Order'] => 'Hemiptera'
            ['Rank_Family'] => 'Miridae'
            ['Rank_Genus'] => 'Kanakamiris'
            ['Rank_Species'] => ''
        ) ........

どこ： 'Rank_Order' isParentOf 'Rank_Family' isParentOf 'Rank_Genus' isParentOf 'Rank_Species'

私はphpソリューションに焦点を当てた同様の質問をしました ここ 、しかし唯一の答えは私のサーバーで機能しておらず、何が起こっているのかよくわからないので、デザインからこの質問をしたいと思いますパターンパースペクティブ、およびjavascriptとd3.jsにある私の実際の使用への参照を含めること。

javascriptjsond3.jshierarchytreemap
15
johowie

以下は、提供した構造に固有のものです。かなり簡単に、より一般的にすることができます。 addChild関数は単純化できると確信しています。コメントがお役に立てば幸いです。

function toHeirarchy(obj) {

  // Get the organisms array
  var orgName, orgNames = obj.organisms;

  // Make root object
  var root = {name:'ROOT', children:[]};

  // For each organism, get the name parts
  for (var i=0, iLen=orgNames.length; i<iLen; i++) {
    orgName = orgNames[i].name.split('.');

    // Start from root.children
    children = root.children;

    // For each part of name, get child if already have it
    // or add new object and child if not
    for (var j=0, jLen=orgName.length; j<jLen; j++) {
      children = addChild(children, orgName[j]);      
    }
  }
  return root;

  // Helper function, iterates over children looking for 
  // name. If found, returns its child array, otherwise adds a new
  // child object and child array and returns it.
  function addChild(children, name) {

    // Look for name in children
    for (var i=0, iLen=children.length; i<iLen; i++) {

      // If find name, return its child array
      if (children[i].name == name) {
        return children[i].children;        
      }
    }
    // If didn't find name, add a new object and 
    // return its child array
    children.Push({'name': name, 'children':[]});
    return children[children.length - 1].children;
  }
}
7
RobG

あなたの最初の入力を考えると、私は次のコードのようなものがあなたの望ましい出力を生み出すと信じています。これが最も美しい方法だとは思いませんが、当時頭に浮かんだのはそれです。

データを前処理して、最初に文字列の最初の配列を次のような配列の配列に分割するのが最も簡単なようでした。

[
   ["Hemiptera","Miridae","Kanakamiris" ],
   ["Hemiptera","Miridae","Neophloeobia","incisa" ],
   //etc
]

...次に、それを処理して、次のような形式で作業オブジェクトを取得します。

  working = {
       Hemiptera : {
           Miridae : {
              Kanakamiris : {},
              Neophloeobia : {
                  incisa : {}
              }
           }
       },
       Lepidoptera : {
           Nymphalidae : {
              Ephinephile : {
                  rawnsleyi : {}
              }
           }
       }
    }

...配列ではなくオブジェクトを操作すると、子アイテムがすでに存在するかどうかを簡単にテストできるためです。上記の構造を作成したら、最後にもう一度処理して、最終的な目的の出力を取得します。そう：

// start by remapping the data to an array of arrays
var organisms = data.organisms.map(function(v) {
        return v.name.split(".");
    });

// this function recursively processes the above array of arrays
// to create an object whose properties are also objects
function addToHeirarchy(val, level, heirarchy) {
    if (val[level]) {
        if (!heirarchy.hasOwnProperty(val[level]))
            heirarchy[val[level]] = {};
        addToHeirarchy(val, level + 1, heirarchy[val[level]]);
    }
}
var working = {};    
for (var i = 0; i < organisms.length; i++)
    addToHeirarchy(organisms[i], 0, working);

// this function recursively processes the object created above
// to create the desired final structure
function remapHeirarchy(item) {
    var children = [];
    for (var k in item) {
        children.Push({
            "name" : k,
            "children" : remapHeirarchy(item[k])
        });
    }
    return children;
}

var heirarchy = {
    "name" : "ROOT",
    "children" : remapHeirarchy(working)
};

デモ： http://jsfiddle.net/a669F/1/

5
nnnnnn

私自身の質問に対する別の答え....この1日、私はd3.jsについて、そしてこの質問に関連して、あまり多くのことを学びませんでした d3.nest（） with .key（ ）と.entries（）は私の友達です（すべてのd3関数）。この回答には初期データの変更が含まれるため、私が尋ねた特定の質問に対する適切な回答とは見なされない場合があります。ただし、誰かが同様の質問をしていて、サーバー上のものを変更できる場合、これは非常に簡単な解決策です。

データベースから次の形式でデータを返します。

json = {'Organisms': [
    { 'Rank_Order': 'Hemiptera',
      'Rank_Family': 'Miridae',
      'Rank_Genus': 'Kanakamiris',
      'Rank_Species': '' },
    {}, ...
]}

次に、 d3.nest（） を使用します

organismNest = d3.nest()
    .key(function(d){return d.Rank_Order;})
    .key(function(d){return d.Rank_Family;})
    .key(function(d){return d.Rank_Genus;})
    .key(function(d){return d.Rank_Species;})
    .entries(json.Organism);

これは次を返します：

{
key: "Hemiptera"
  values: [
    {
      key: "Cicadidae"
      values: [
        {
          key: "Pauropsalta "
          values: [
            {
              key: "siccanus"
              values: [
                       Rank_Family: "Cicadidae"
                       Rank_Genus: "Pauropsalta "
                       Rank_Order: "Hemiptera"
                       Rank_Species: "siccanus"
                       AnotherOriginalDataKey: "original data value"

etc etc, nested and lovely

これにより、上記の質問で目的の形式として説明した配列と非常によく似たものが返されますが、いくつかの違いがあります。特に、すべてを囲むROOT要素はありません。また、最初に必要だったキーは「name」と「children」でしたが、.nest（）はキーをそれぞれ「key」と「values」として返します。これらの代替キーは、適切なデータアクセサー関数（基本的なd3の概念）を定義するだけでd3.jsで使用するのに十分簡単です...しかし、それは質問の元の範囲を超えています...誰かにも役立つことを願っています

2
johowie