在嵌套结构中为svg组添加边框
Add border to svg groups in nested structure
我使用以下代码使用HTML ul和li实现JSON模式的树状结构。JSFiddle
我希望在HTML SVG上实现相同的功能(因为以后会有可绘制的东西),我用SVG替换了ul和li:g
是否有一种方法来添加边框,如在ul/li的g's?我可以使用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>
您不能为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>
相关文章:
- 在mouseover上添加边框,在mouseout上删除边框
- 在覆盖和关闭按钮或链接中为img添加边框
- 如何添加添加边框的无限制点击
- 动画添加边框(先增大然后缩小)
- 如何在高图表中为标题添加边框
- 在 JavaScript 中编辑 blob 图像(调整大小并添加边框)
- 使用Javascript为输入字段添加边框样式颜色(提交时没有值),该字段已经在css中带有!important标签的边
- 如何在跳转到页面时向行添加边框
- 使用 jquery 将鼠标悬停在地图区域时添加边框
- Onmouseover在JavaScript中添加边框
- 在 D3 地图中向 SVG 元素添加边框和边框半径
- 使用Jquery添加边框
- JQuery图像OnClick添加边框
- 在悬停上添加边框会导致闪烁
- 如何在D3中为悬停图像添加边框
- 为每个从特定数字开始的x列表添加边框
- 为d3js的线元素添加边框
- 在JavaScript画布上为文本添加边框
- 如何动态添加边框,使其不影响布局
- 如何在矩形的1或2面,顶部,底部,左侧,右侧添加边框