2016-09-19 53 views
1

我有以下方法 - 一種用於從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++; 
     } 
    } 

} 
+0

你有問題,排名或水平? – Slavik

+0

級別是問題 - 通過糾正錯誤來更新問題。 – SachiDangalla

+1

如何在到達分支的最後一個節點時返回關卡?如果我理解正確,那麼您需要將最高級別傳遞迴前輩以使其正常工作 –

回答

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>

相關問題