D3jsはJSON要素の型別にd3.hierarchyのSVGに異なる要素を追加します

Question

動的なorgsnization構造体を書き込もうとしていますが、問題があります。 JSONの要素タイプ（人または部門）の依存は、d3.hieararchyのSVGにさまざまな要素を追加する必要があります。誰か助けてくれる？

JSONファイルのサンプル。

{ 
     "type": "department", 
     "name": "it", 
     "children": [{ 
      "type": "person", 
      "name": "K", 
      "position": "shef", 
      "children": [{ 
        "type": "department", 
        "name": "Front-end", 
        "children": [{ 
         "type": "person", 
         "name": "Ja", 
         "position": "Team Lead", 
         "children": [{ 
           "type": "person", 
           "name": "D", 
           "position": "Middle" 
          }, 
          { 
           "type": "person", 
           "name": "A", 
           "position": "Middle" 
          }, 
          { 
           "type": "person", 
           "name": "P", 
           "position": "Провідний інженер-програміст з Web-розробок" 
          } 
         ] 
        }] 
       }, 
       { 
        "type": "department", 
        "name": "SysAdmins", 
        "children": [{ 
         "type": "person", 
         "name": "V", 
         "position": "Team Lead", 
         "children": [] 
        }] 
       }, 
       { 
        "type": "department", 
        "name": "Help Desk", 
        "thumbnail": "", 
        "children": [{ 
         "type": "person", 
         "name": "Yu", 
         "position": "Team Lead", 
         "children": [ 

         ] 
        }] 
       } 
      ] 
     }] 
    } 

Answer 1

この問題は、JSONファイルの構造に起因しています。これはネストされています（つまり、オブジェクトには他のオブジェクトの配列が含まれています）。

これはツリー構造のデータを表示する直感的な方法ですが、ナビゲートするには少し苦労する可能性があります。

私はまずJSONの構造を扱い、d3を介してプレゼンテーションを心配します。

function flatten(obj, stack, parentId) { 
    stack = stack || { objects: [], max: 0 } 
    parentId = parentId || 0 
    for (var property in obj) { 
     if (obj.hasOwnProperty(property)) { 
      if (typeof obj[property] == "object") { 
       var newObj = obj[property]; 
       if (!Array.isArray(newObj)) { 
        // newObj is not an array 
        newObj.id = ++(stack.max); 
        newObj.parent = parentId 
        stack.objects.push(newObj); 
        flatten(newObj, stack, newObj.id); 
       } else { 
        // newObj is an array 
        delete obj[property]; 
        flatten(newObj, stack, parentId); 
       } 
      } 
     } 
    } 
    return stack.objects; 
} 

あなたはJSONを持っているときには、単にvar data = flatten(myData)を呼び出します、私はあなたのデータ構造をフラット化し、各要素にID番号を割り当てます（thisに触発さ）少し機能を書いている。この目的のために

データが読み込まれました。

var depts = data.filter(function(d) { return d.type == "department"; }); 

これはあなたの階層のレイアウトの（おそらくより困難な）仕事のお手伝いをしていませんが、それはん：あなたは、その後出て分割部署や人のような便利なものを行うことができます

は、thisのような階層ツリーを実装するプロジェクトで使用される種類の形式にデータを配置します。