title: Add border to svg groups in nested structure
body: <p>I used the following to achieve tree structure of a JSON schema using HTML ul and li. <a href="https://jsfiddle.net/sachid/Lvuff6r5/" rel="nofollow">JSFiddle</a></p>
  
  <p>I wish to achieve the same on an HTML SVG (since there will be drawable stuff later) and I replaced ul and li's with SVG:g </p>
  
  <p>Is there a way to add borders as in ul/li to the g's? I could use SVG lines to get the appropriate structure but is there a better way? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 result1 = d3.select("#input-structure");
  traverseJSONSchema1(data, title, result1 );
  
  
  
  
  
  function traverseJSONSchema1(root, rootname, resultpane ) {
  
    if (root.type === "object") {
      var listitem = resultpane.append("li");
      if (rootname !== "") {
        listitem.text(rootname + ":" + root.type  ); 
      }
      var newlist = listitem.append("ul");
      var items = root.properties; //select PROPERTIES
      for (var i = 0; i &lt; 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 );
      }
  
    } 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 + "]" ); 
      }
  
      traverseJSONSchema1(items, "", listitem ); //recurse through the items of array
    } else if (["string", "integer", "number", "boolean"].indexOf(root.type) &gt; -1) { //when the type is a primitive
      var listitem = resultpane.append("li");
      if (rootname !== "") {
        listitem.text(rootname + ":" + root.type   ); 
      }
    }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .structure,
     .structure ul {
       list-style-type: none;
       text-indent: 5px;
     }
     
     li {
       border-bottom: 1px solid #c9c9c9;
       border-left: 1px solid #c9c9c9;
       width: max-content;
     }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;div style="display:inline-block;"&gt;
    &lt;ul id="input-structure" class="structure"&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>