我正在构建一个树形图，并着眼于使树图交互。我希望在单击时折叠节点，让其他节点靠近折叠节点，当单击（打开）时，让其他节点移开，这样它们就不会重叠。
整棵树需要互动，因为数据将按需加载。
有人可以给我一些提示/建议吗？
我查看了jQuery位置属性
我试过了（代码）：
<div id="svgContainer">
<div id="el-a" class="one"></div>
<div class="Container">
<div id="el-b" class="tiles two"></div>
<div id="el-c" class="tiles three"></div>
<div id="el-d" class="tiles four"></div>
</div>
</div>
CSS
.one{
height: 100px;
width: 100px;
position: absolute;
top: 50px;
left: 500px;
background-color: #42647F;
border-radius: 4px;
transition: .2s;
}
.two{
height: 100px;
width: 100px;
position: absolute;
top: 200px;
left: 600px;
background-color: #42647F;
border-radius: 4px;
transition: .2s;
cursor: pointer;
}
.three{
height: 100px;
width: 100px;
position: absolute;
top: 200px;
left: 600px;
background-color: #42647F;
border-radius: 4px;
transition: .2s;
cursor: pointer;
}
.four{
height: 100px;
width: 100px;
position: absolute;
top: 200px;
left: 400px;
background-color: #42647F;
border-radius: 4px;
transition: .2s;
cursor: pointer;
}
.collapse{
height: 10px;
width:10px;
margin-left: 45px;
}
的jQuery
jQuery(document).ready(function() {
$("#svgContainer").HTMLSVGconnect({
paths: [
{ start: "#el-a", end: "#el-b"},
{ start: "#el-a", end: "#el-c"},
{ start: "#el-a", end: "#el-d"}
]
});
$(".tiles").click(function
(){
$(this).toggleClass("collapse");
});
$(".two").position({
my: "right middle",
at: "left+25 middle",
of: ".Container",
collision:"none",
using: using
});
$(".three").position({
my: "center middle",
at: "center middle",
of: ".Container",
using: using
});
$(".four").position({
my: "left middle",
at: "right-25 middle",
of: ".Container",
collision: "none",
using: using
});
});