8

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

我的树的布局来自树示例： http: //mbostock.github.com/d3/ex/cluster.html

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

我已经浏览了文档，但没有发现任何可以让我让节点崩溃或消失的东西。

我能做什么？

4

3 回答 3

22

有这个：

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

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

于 2012-03-03T10:58:45.033 回答
2

有几种方法，一种是使用常规样式来隐藏孩子的标记（不透明度：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();
}
于 2013-02-15T13:47:42.650 回答
1

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

于 2012-03-02T23:43:13.250 回答