javascript - 向嵌套结构中的 svg 组添加边框

Question

我使用以下内容使用 HTML ul 和 li 实现 JSON 模式的树结构。 JSFiddle

我希望在 HTML SVG 上实现相同的效果(因为稍后会有可绘制的东西)并且我用 SVG:g 替换了 ul 和 li

有没有办法像 ul/li 那样给 g 添加边框？我可以使用 SVG 线条来获得适当的结构，但是有更好的方法吗？

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 < 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) > -1) { //when the type is a primitive
    var listitem = resultpane.append("li");
    if (rootname !== "") {
      listitem.text(rootname + ":" + root.type   ); 
    }
  }

}

  .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>

Answer 1

您不能向 SVG <g> 元素添加样式，但您赋予 <g> 元素的样式将应用于其子元素。

您可以通过在其中创建与每个组元素具有相同尺寸的 <rect> 元素来为组元素添加边框。

这是一个例子。

d3.select("svg").selectAll("g")
  .each(function() {
    var bbox = d3.select(this).node().getBBox();    
    d3.select(this)
      .append("rect")
      .attr("width", bbox.width)
      .attr("height", bbox.height)
      .attr("x", bbox.x)
      .attr("y", bbox.y)
      .style("fill", "transparent")
      .style("stroke", "black");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height=500 width=500>
  <g>
    <circle r="5" fill="#1f77b4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="326.3864923262564" cy="386.95554145281227">
      <title>Myriel</title>
    </circle>
    <circle r="5" fill="#1f77b4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="301.18316897593957" cy="420.628099778895">
      <title>Napoleon</title>
    </circle>
    <circle r="5" fill="#1f77b4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="373.5296290951024" cy="350.31992689845373">
      <title>Mlle.Baptistine</title>
    </circle>
    <circle r="5" fill="#1f77b4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="383.028688690342" cy="370.21780005972573">
      <title>Mme.Magloire</title>
    </circle>
    <circle r="5" fill="#1f77b4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="291.2095525200062" cy="404.52807449846455">
      <title>CountessdeLo</title>
    </circle>
    <circle r="5" fill="#1f77b4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="284.3663860468869" cy="385.80285560875626">
      <title>Geborand</title>
    </circle>
    <circle r="5" fill="#1f77b4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="312.5026917750641" cy="425.9760979428693">
      <title>Champtercier</title>
    </circle>
    <circle r="5" fill="#1f77b4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="282.3287327273353" cy="397.57426542045806">
      <title>Cravatte</title>
    </circle>
    <circle r="5" fill="#1f77b4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="287.68354521150735" cy="373.4553102756052">
      <title>Count</title>
    </circle>
    <circle r="5" fill="#1f77b4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="290.796739411191" cy="415.5793195443388">
      <title>OldMan</title>
    </circle>
    <circle r="5" fill="#aec7e8" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="475.09793964155534" cy="353.2189171085851">
      <title>Labarre</title>
    </circle>
    <circle r="5" fill="#aec7e8" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="456.0195362306761" cy="320.7461480714901">
      <title>Valjean</title>
    </circle>
    <circle r="5" fill="#ff7f0e" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="417.6709517148946" cy="241.9725833398076">
      <title>Marguerite</title>
    </circle>
    <circle r="5" fill="#aec7e8" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="461.5929705608288" cy="358.92350523233586">
      <title>Mme.deR</title>
    </circle>
  </g>
  <svg>