d3js树布局节点单击事件

时间:2012-09-10 12:19:56

标签: javascript jquery ajax treeview d3.js

我计划使用d3js树布局在屏幕上显示交互式树。

首先,是否有关于d3js树布局用法的任何教程或深入文档。

其次,我希望在单击树的节点时控制事件。我希望使用此事件在屏幕上显示有关该节点的更多详细信息/属性。所以我需要点击的节点的ID。

据我所知,下面提到的方法toggle在单击某个节点以显示/隐藏该节点的子节点时会被调用。

// Toggle children.
function toggle(d) {
//alert();
 if (d.children) {
   d._children = d.children;
   d.children = null;
 } else {
   d.children = d._children;
   d._children = null;
 }
}

但问题是当我取消评论alert()时,树没有显示在屏幕上。这是否意味着除了在此方法中从d3js获取的代码之外,用户不能拥有任何代码?另外我如何处理点击事件?

1 个答案:

答案 0 :(得分:1)

您必须注册活动

nodeEnter = node.enter().append('svg:g')
.attr('class', (d) ->
    if d.children?.length > 0 or d._children?.length > 0 then 'node' else 'leaf node'
)
.attr('transform', (d) -> 'translate(' + source.y0 + ',' + source.x0 + ')' )
.on('click', (d) -> 
    toggle(d)
    update(d)
    )