如何使用svg实现可折叠树结构
How to implement collapsible tree structure using svg g
我使用svg组件实现了一个树形结构——使用svg的原因说来话长,涉及可拖动节点。
当单击父节点时隐藏并显示以下内容,但它与折叠不同。正确实现可折叠/可扩展功能的最佳方法是什么(当子元素被隐藏时,较低的兄弟元素的位置必须出现等)
我应该遍历兄弟节点并更新它们的位置,还是有更简单的方法?
树形结构-分支-和展开/折叠图标将稍后添加。
d3.selectAll(".nested-group").each(function() {
var sib = d3.select(this).select(".nested-group");
d3.select(this).select(".parent-node").on("click", function() {
sib.style("display", function() {
return (sib.style("display") === "none" ? "inline" : "none");
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg class="canvas" width="1800" height="500">
<g id="input-container" transform="translate(0,0)">
<g id="input-container-fo" class="container-fo">
<rect width="317.5" y="20" x="40" class="container-title-outline" id="input-container-title-outline" height="20" fill="#77C1C0" stroke="black"></rect>
<text width="270" y="35" x="40" class="container-title" id="input-container-title" font-weight="bold">Input</text>
<rect stroke-width="1" width="317.5" y="20" x="40" class="container-outline" id="input-container-outline" height="360" fill="none" stroke="black"></rect>
</g>
<g class="nested-group">
<g width="170" height="20" class="node-element parent-node">
<text y="55" x="51" class="node-element-text">person:object</text>
</g>
<g class="nested-group">
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="75" x="93.5" class="node-element-text">first name:string</text>
</g>
</g>
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="95" x="93.5" class="node-element-text">last name:string</text>
</g>
</g>
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="115" x="93.5" class="node-element-text">age:number</text>
</g>
</g>
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="135" x="93.5" class="node-element-text">birthday:string</text>
</g>
</g>
<g class="nested-group">
<g width="170" height="20" class="node-element parent-node">
<text y="155" x="93.5" class="node-element-text">address:object</text>
</g>
<g class="nested-group">
<g class="nested-group">
<g width="170" height="20" class="node-element parent-node">
<text y="175" x="136" class="node-element-text">street address:object</text>
</g>
<g class="nested-group">
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="195" x="178.5" class="node-element-text">house number:number</text>
</g>
</g>
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="215" x="178.5" class="node-element-text">lane:string</text>
</g>
</g>
</g>
</g>
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="235" x="136" class="node-element-text">city:string</text>
</g>
</g>
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="255" x="136" class="node-element-text">state:string</text>
</g>
</g>
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="275" x="136" class="node-element-text">country:string</text>
</g>
</g>
</g>
</g>
<g class="nested-group">
<g width="170" height="20" class="node-element parent-node">
<text y="295" x="93.5" class="node-element-text">phone number:array[object]</text>
</g>
<g class="nested-group">
<g class="nested-group">
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="315" x="136" class="node-element-text">location:string</text>
</g>
</g>
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="335" x="136" class="node-element-text">code:number</text>
</g>
</g>
</g>
</g>
</g>
<g class="nested-group">
<g width="170" height="20" class="node-element parent-node">
<text y="355" x="93.5" class="node-element-text">children:array[string]</text>
</g>
<g></g>
</g>
<g>
<g width="170" height="20" class="node-element leaf-node">
<text y="375" x="93.5" class="node-element-text">nickname:string</text>
</g>
</g>
</g>
</g>
</g>
</svg>
在SVG中没有像在HTML中那样的自动布局。因此,当显示或隐藏另一个元素时,后面元素的位置无法自动调整。
所以,要回答你的问题,是的,你必须自己调整其他元素的位置
相关文章:
- 可折叠树在第二级不显示子树
- 引导程序/轨道-可折叠导航栏没有'我不能在手机上工作
- 只使用CSS创建可折叠菜单或spry菜单
- 可以't以编程方式关闭jQuery移动弹出窗口中的可折叠部分
- QML中的可折叠面板
- 可折叠容器/柱.添加多个链接
- 如何将垂直选项卡式内容面板更改为具有媒体查询和 jquery 的响应式可折叠面板
- 如何防止我的引导可折叠框滚动页面
- 如何以可扩展和可折叠的树形结构显示XML模式
- 单击一个后自动折叠所有其他可折叠内容
- 可折叠侧边栏/导航菜单
- 可折叠<UL><李>不起作用
- Ext JS 5.1:当可折叠为true时,无法对面板进行标题设置
- jQuery与可折叠列表冲突
- Postback后保持可折叠潜水打开
- 如何在HTM文件中创建与可折叠面板扩展程序等效的扩展程序
- 为d3.js可折叠树设置背景
- 可折叠/不可折叠的列表视图类似于Word大纲视图
- 如何使用svg实现可折叠树结构
- 组织结构图 - 树,在线,动态,可折叠,图片 - 在D3中