2016-06-29 31 views
0

私はd3.jsを初めて使用しています。このリンクから階層エッジバンドルを変更しようとしています:https://bl.ocks.org/mbostock/7607999d3.js階層的なエッジクリック時のバンドルノードの色の変更

enter image description here

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

どうすればいいですか?

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

私は(私はCSSでフォーカスを使用することができます)データを変更し、それらを代わりにリンクさせることを試みた:

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

が、うまくいきませんでした(もちろん、あなたがそれを行うことができれば私に知らせてどういうわけか)。 などのようなリンクの属性を使用して:

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

動作しないか、私はCSSでフォーカス上のスタイルを変更することはできません(またはどのように私にはわからないが、私はできればそれは私の問題を解決する可能性があるため、 )。

私はノードを操作しようとしましたが、これまではすべてのノード、ソース、ターゲットを変更できましたが、クリックするだけでは変更できませんでした。

ノードには「」という属性がありますが、これは私が望むものかもしれませんが、どちらを使用するかはわかりません。

私はすでにこれに多くの時間を費やしているので、すべての解決策、部分的にさえ歓迎されるでしょう。

答えて

1

はあなたfunction mouseclick内にこれを追加します。正しい軌道に乗っていhttps://fiddle.jshell.net/vdmn2oj4/3/

+1

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 

はここにあなたの更新フィドルです!私はそれを3番目の色にしたいと思っています。例えば、.node - {fill:#00BFFF;}(それはフィドルのCSSです)です。 「node-sourc、truee」を「node-click、true」に変更すると、別のノードをクリックすると色が削除されません。何かアドバイス? – MorganFR

+0

私はちょうどフィドルを更新しました。 –

+0

ありがとうございました。編集した関数は現在動作しています。 – MorganFR