再帰的メソッド - 各呼び出しで値を増やす

Question

私は以下のメソッドを持っています - JSONスキーマからツリー構造を生成するために使用される再帰的メソッドです。

JSFiddle

私は、ツリーの各ノードのレベルとランクを維持したいです。 （ランク=水平ランク、レベル=垂直ランク（順次増分））レベルとランクの目的は、後で同じ構造をSVGに描画することです。

ランクは正しく取得されますが、ネストされたリストから外に出るとレベルは更新されません。レベルを正しく更新するには？

ランクとレベルを使用せずにsvgにこの構造体を描画する方法はありますか？

function traverseJSONSchema1(root, rootname, resultpane, lev, rank) { 

    if (root.type === "object") { 
     var listitem = resultpane.append("li"); 
     if (rootname !== "") { 
      listitem.text(rootname + ":" + root.type + "-" + lev + "-" + rank); 
      rank++; 
      lev++; 
     } 
     var newlist = listitem.append("ul"); 
     var items = root.properties; //select PROPERTIES 
     for (var i = 0; i < Object.keys(items).length; i++) { //traverse through each PROPERTY of the object 
      var itemname = Object.keys(items)[i]; 
      var item = items[itemname]; 
      traverseJSONSchema1(item, itemname, newlist, lev + i, rank); 
     } 
    } else if (root.type === "array") { 
     var items = root.items; //select ITEMS 
     var listitem = resultpane.append("li"); 
     if (rootname !== "") { 
      listitem.text(rootname + ":" + root.type + "[" + items.type + "]" + "-" + lev + "-" + rank); 
      rank++; 
      lev++; 
     } 

     traverseJSONSchema1(items, "", listitem, lev + 1, rank); //recurse through the items of array 
    } else if (["string", "integer", "number", "boolean"].indexOf(root.type) > -1) { //when the type is a primitive 
     var listitem = resultpane.append("li"); 
     if (rootname !== "") { 
      listitem.text(rootname + ":" + root.type + "-" + lev + "-" + rank); 
      rank++; 
      lev++; 
     } 
    } 

} 

Answer 1

@Chris Satchellの考えによれば、レベルを返すのが解決策でした。

var data = { 
 
    "title": "person", 
 
    "type": "object", 
 
    "properties": { 
 
    "first name": { 
 
     "type": "string" 
 
    }, 
 
    "last name": { 
 
     "type": "string" 
 
    }, 
 
    "age": { 
 
     "type": "number" 
 
    }, 
 
    "birthday": { 
 
     "type": "string", 
 
     "format": "date-time" 
 
    }, 
 
    "address": { 
 
     "type": "object", 
 
     "properties": { 
 
     "street address": { 
 
      "type": "object", 
 
      "properties": { 
 
      "house number": { 
 
       "type": "number" 
 
      }, 
 
      "lane": { 
 
       "type": "string" 
 
      } 
 
      } 
 
     }, 
 
     "city": { 
 
      "type": "string" 
 
     }, 
 
     "state": { 
 
      "type": "string" 
 
     }, 
 
     "country": { 
 
      "type": "string" 
 
     } 
 
     } 
 
    }, 
 
    "phone number": { 
 
     "type": "array", 
 
     "items": { 
 
     "type": "object", 
 
     "properties": { 
 
      "location": { 
 
      "type": "string" 
 
      }, 
 
      "code": { 
 
      "type": "number" 
 
      } 
 
     }, 
 
     "required": [ 
 
      "location", 
 
      "code" 
 
     ] 
 
     } 
 
    }, 
 
    "children": { 
 
     "type": "array", 
 
     "items": { 
 
     "type": "string" 
 
     } 
 
    }, 
 
    "nickname": { 
 
     "type": "string" 
 
    } 
 
    } 
 
}; 
 

 
var title = data.title || "Root"; 
 
var result = d3.select("#trial-container"); 
 
var result1 = d3.select("#input-structure"); 
 
traverseJSONSchema1(data, title, result1, 0, 0); 
 

 

 

 

 

 
function traverseJSONSchema1(root, rootname, resultpane, lev, rank) { 
 

 
    if (root.type === "object") { 
 
    var listitem = resultpane.append("li"); 
 
    if (rootname !== "") { 
 
     listitem.text(rootname + ":" + root.type + "-" + lev + "-" + rank); 
 
     rank++; 
 
     lev++; 
 
    } 
 
    var newlist = listitem.append("ul"); 
 
    var items = root.properties; //select PROPERTIES 
 
    for (var i = 0; i < Object.keys(items).length; i++) { //traverse through each PROPERTY of the object 
 
     var itemname = Object.keys(items)[i]; 
 
     var item = items[itemname]; 
 
     lev = traverseJSONSchema1(item, itemname, newlist, lev, rank); 
 
    } 
 

 
    } else if (root.type === "array") { 
 
    var items = root.items; //select ITEMS 
 
    var listitem = resultpane.append("li"); 
 
    if (rootname !== "") { 
 
     listitem.text(rootname + ":" + root.type + "[" + items.type + "]" + "-" + lev + "-" + rank); 
 
     rank++; 
 
     lev++; 
 
    } 
 

 
    lev = traverseJSONSchema1(items, "", listitem, lev, rank); //recurse through the items of array 
 
    } else if (["string", "integer", "number", "boolean"].indexOf(root.type) > -1) { //when the type is a primitive 
 
    var listitem = resultpane.append("li"); 
 
    if (rootname !== "") { 
 
     listitem.text(rootname + ":" + root.type + "-" + lev + "-" + rank); 
 
     rank++; 
 
     lev++; 
 
    } 
 
    } 
 
    return lev; 
 
}

.structure, 
 
    .structure ul { 
 
    list-style-type: none; 
 
    text-indent: 5px; 
 
    } 
 
    
 
    li { 
 
    border-bottom: 1px solid #c9c9c9; 
 
    border-left: 1px solid #c9c9c9; 
 
    width: max-content; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div style="display:inline-block;"> 
 
    <ul id="input-structure" class="structure"> 
 
    </ul> 
 
</div>