0

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 から取得したコード以外のコードを持つことができないということですか? また、クリックイベントを処理するにはどうすればよいですか?

4

1 に答える 1

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)
    )
于 2012-10-04T20:40:18.883 に答える