Question

我有以下方法 - 用于从JSON模式生成树结构的递归方法。

我想保持树的每个节点的级别和等级。（Rank =水平等级，等级=垂直等级（按顺序递增））等级和等级的目的是稍后在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>

递归方法 - 在每次调用时增加一个值

1 个答案: