gpt4 book ai didi

javascript - 如何使用svg g实现可折叠树结构

转载 作者:行者123 更新时间:2023-11-30 11:50:10 25 4
gpt4 key购买 nike

我使用 svg g 组件实现了树结构 - 使用 svg 的原因说来话长,涉及可拖动节点。

下面是点击父节点时的隐藏和显示,但和收起不一样。正确实现可折叠/可展开功能的最佳方法是什么(当 child 被隐藏时,较低的 sibling 位置必须出现等)

我应该遍历 sibling 并更新他们的位置还是有更简单的方法?

稍后将添加树结构 - 分支 - 和展开/折叠图标。

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 中那样的自动布局。所以当另一个元素显示或隐藏时,后面的元素的位置无法自动调整。

因此,要回答您的问题,是的,您必须自己调整其他元素的位置。

关于javascript - 如何使用svg g实现可折叠树结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39724745/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com