Question

我正在构建一个树结构（或者用我自己的json中的一组自己的数据修改其中一个示例）并且我正在尝试创建一些功能：

我的树的布局是从树的例子： http://mbostock.github.com/d3/ex/cluster.html

我正在向圈子添加一个onclick事件，我想要折叠所点击的节点的子节点。也就是说，当用户点击与节点关联的钢蓝色圆圈时，我希望节点的子节点消失。

我已经搜索了文档，但我没有发现任何可以让节点崩溃或消失的内容。

我该怎么办？

Answer 1

就是这样：

http://mbostock.github.com/d3/talk/20111018/tree.html

我的SVG Open keynote还有许多其他交互式分层布局示例。

Answer 2

不幸的是，我仍然在使用D3，但我不确定如何最好地回答你的问题。但这是一个强制导向布局，允许您通过点击它们来显示/隐藏节点，这可能会给您一些想法：http://bl.ocks.org/1062288

Answer 3

有几种方法，一种是使用常规存储来隐藏子项的标记（不透明度：0，或显示：无）。但是，这只是使数据不可见，树保持其形状，好像数据在那里，你只是看不到它。

通常你会希望树假装数据不在那里并相应地更新，因为你可以使用与上面链接中的力导向布局示例相同的方法。

归结为： 1）使用函数构建d3树 2）将click事件附加到可折叠节点 3）click事件重命名节点的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.js中树的子节点？

3 个答案: