我正在构建一个树形结构(或者更确切地说,用我自己的 json 中的一组我自己的数据修改其中一个示例)并且我正在尝试创建一些功能:
我的树的布局来自树示例: http: //mbostock.github.com/d3/ex/cluster.html
我正在添加(到圆圈中)一个 onclick 事件,我想折叠单击节点的子节点。也就是说,当用户点击与某个节点关联的钢蓝色圆圈时,我希望该节点的子节点消失。
我已经浏览了文档,但没有发现任何可以让我让节点崩溃或消失的东西。
我能做什么?
我正在构建一个树形结构(或者更确切地说,用我自己的 json 中的一组我自己的数据修改其中一个示例)并且我正在尝试创建一些功能:
我的树的布局来自树示例: http: //mbostock.github.com/d3/ex/cluster.html
我正在添加(到圆圈中)一个 onclick 事件,我想折叠单击节点的子节点。也就是说,当用户点击与某个节点关联的钢蓝色圆圈时,我希望该节点的子节点消失。
我已经浏览了文档,但没有发现任何可以让我让节点崩溃或消失的东西。
我能做什么?
有几种方法,一种是使用常规样式来隐藏孩子的标记(不透明度:0,或显示:无)。但是,这只是使数据不可见,树保持其形状,就好像数据在那里一样,您只是看不到它。
通常,您会希望树假装数据不存在并相应更新,因为您可以使用与上述链接中的强制导向布局示例相同的方法。
它归结为:1)使用函数来构建 d3 树 2)将单击事件附加到可折叠节点 3)单击事件重命名节点的 children 属性并调用 1)中的函数,该函数在没有该节点的情况下重绘树节点的孩子。
这是 nkoren 答案中链接的相关代码(http://bl.ocks.org/1062288):
function update() {
// build the tree layout here
// append on("click", click) to the collapsible nodes
}
// Toggle children on click
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();
}
不幸的是,我仍在跟上 D3 的速度,并且不确定如何最好地回答您的问题。但这是一个强制导向的布局,允许您通过单击它们来显示/隐藏节点,这可能会给您一些想法:http ://bl.ocks.org/1062288