8
A
答えて
5
IはJavascript/SVG/d3jsのnoobのだが、私は、テキストの上にハイパーリンクされた透明の四角形を配置することで、これを "解決"、この回避策がbl.ockとして提供されています:。
nodeEnter
.append("a")
.attr("xlink:href", function (d) { return "http://www.example.com/flare/" + d.id; })
.append("rect")
.attr("class", "clickable")
.attr("y", -6)
.attr("x", function (d) { return d.children || d._children ? -60 : 10; })
.attr("width", 50) //2*4.5)
.attr("height", 12)
.style("fill", "lightsteelblue")
.style("fill-opacity", .3) // set to 1e-6 to make transparent
;
は、私が追加(
g
)要素の代わりに
clickable
styleと
add .on("click", click)
to the circleを追加してください。
これは機能しますが、クリック可能な矩形のサイズがラベルのテキストのサイズにならないという欠点があります。
私は本当に良いソリューションを楽しみにしていますので、あなたの質問に+1してください!
0
私はこのようなリンクに関するいくつかの情報、とノードにテキストの別の行を追加しました:パスとラベルを使用して、各ノードのために必要なデータを持っている
nodeEnter.append("a")
.attr("xlink:href", function(d) { return d.path; })
.append("text")
.attr("class", "clickable")
.attr("y", 16)
.attr("x", function (d) { return d.children || d._children ? -10 : 10; })
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.label; })
。
4
あなたがグローバル・ノード上のクリックハンドラを削除し、2つの異なるクリックハンドラを添付する場合は、次のテキスト
ため
- サークルの一つ
- 一つをあなたは異なる動作を持つことができますテキストをクリックするとその要素のスタイルを少し変えると、ハイパーリンクと同じように見えます。
ここに私のバイオリンをチェックアウト: http://jsfiddle.net/empie/EX83X/
クリックハンドラ
var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }); nodeEnter.append("circle") .attr("r", 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }).on("click", click);; nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("dy", ".35em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.name; }) .style("fill-opacity", 1e-6) .attr("class", "hyper").on("click", clack); function clack(d) { alert(d.name); }
とCSS:
.hyper { color: blue; text-decoration: underline; } .hyper:hover { color: yellow; text-decoration: none; }
関連する問題
- 1. 折りたたみ可能なツリーを再現する
- 2. d3 v4の折りたたみ可能な放射状ツリー
- 3. ナビゲーションドロワーの折りたたみ可能な折りたたみ可能なメニュー
- 4. jQuery mobileは折りたたみ可能なセットにアニメーションを追加します
- 5. Sharepoint(jQuery)に折りたたみ可能なヘッダーを追加する
- 6. データロールを動的に追加する(折りたたみ可能なデータロール)
- 7. 折りたたみ可能なオートコンプリート
- 8. 折りたたみ可能なツールバー
- 9. 折りたたみ可能な列テーブル
- 10. 折りたたみ可能なサイドバー/ナビゲーションメニュー
- 11. UWP折りたたみ可能なページヘッダー
- 12. 折りたたみ可能なコンテンツ
- 13. 折りたたみ可能なビュー
- 14. D3折りたたみツリー内のノードのサイズ変更可能な矩形
- 15. クリックしてテキストを移動するd3js折りたたみ可能なツリー
- 16. 折りたたみ可能/拡張可能なテーブルの動作
- 17. 折りたたみツリーが機能しない
- 18. 折りたためるD3ツリーにテキストを追加する
- 19. 折りたたみ可能リストビュー
- 20. クリック()イベントは折りたたみ可能
- 21. D3.js折りたたみツリー:各レベルのラベルを追加する
- 22. 折りたたみ可能なデータグリッドを作成するには?
- 23. 折りたたみ可能なUIViewを作成するには
- 24. 折りたたみ可能なクリックの後にスクロールする
- 25. 折りたたみ可能なツールバーを使用したBottomSheetDialog
- 26. jQuery Mobile - 折りたたみ可能なヘッダーの余分なアイコン
- 27. スタイリングの追加時にブートストラップ折りたたみパネルが機能しない
- 28. 折りたたみ可能な色の変更をマテリアライズ
- 29. ブートストラップ - 折りたたみ可能な行 - 私たちは
- 30. 折りたたみ可能なコンテンツのJquery Mobileアイコンの配置
そうしない理由を、各ノードのクリックハンドラ関数は、すでにありますがハイパーリンクを使用して実行したいアクションを実行するために使用します。 –
まあ、クリックハンドラは例の円に付けられていて、クリックハンドラをテキスト要素に追加する方法はありません(afaik)ので、これは本当に有効な質問です。実際、私はこれを行う方法も分かりません。今、私はリダイレクトする 'click'ハンドラを使って2番目の要素を描画します。 – Marijn
円のクリックハンドラが展開/折りたたみに添付されています。 – Marijn