0

私は d3.js が初めてで、このリンクから階層エッジ バンドルを変更しようとしています: https://bl.ocks.org/mbostock/7607999。

ここに画像の説明を入力

hoverで表示されるリンクを削除し、代わりに on clickを配置しました。クリックしたノードで同じことをしたいと思います (強調表示) 。ノードのホバー イベントを削除しました。ここに私がこれまでに持っているもののフィドルがあります https://fiddle.jshell.net/vdmn2oj4/。

これどうやってするの？

ホバー時に、css スタイルで「hover」属性を使用することもできますが、クリックではそのようなことはありません (リンクとテキストフィールドにのみフォーカスします)。

データを変更して、代わりにリンクを作成しようとしました (そのため、css でフォーカスを使用できます)。

 <a href='#' onclick='return true;'>data</a>

もちろん、それはうまくいきませんでした（どうにかしてそれができるかどうか教えてください）。次のようなリンクの属性を使用します。

.attr({"xlink:href": "#"})

cssを使用してフォーカス時にスタイルを変更できないため、機能しません（または、方法がわかりませんが、可能であれば問題を解決できる可能性があります）。

ノードの操作も試みましたが、これまでのところ、すべてのノード、ソース、ターゲットのみを変更できましたが、クリックしたノードは変更できませんでした。

ノードに「親」属性があることも知っています。これは私が望むものかもしれませんが、それを使用する方法もわかりませんでした。

私はすでにこれに多くの時間を費やしているので、部分的なものであっても、どんな解決策でも大歓迎です。

4

1 に答える 1

1

これをあなたの中に追加してくださいfunction mouseclick：

d3.select(".node--clicked")
    .classed("node--clicked", false);//removes the class of previously clicked nodes
var clicked = d3.select(this);//select the clicked element
clicked.classed("node--clicked", true);//set the class

更新されたフィドルは次のとおりです: https://fiddle.jshell.net/vdmn2oj4/3/

于 2016-06-29T14:36:31.617 に答える