D3のノードIDを検索します

ラファエルロペス

Mike Bostock TidyTreeを使用してツリーを作成しています

ここにいる何人かの人々の助けを借りて、私はマウスを置いたノードからルートまでのパスをノードに強調表示する機能を実行しました。また、すべてのノードとリンクの色をリセットすることで、色/ストロークをリセットする簡単な機能も実行しました。しかし今、私はノードからルートを通過する別のノードへのパスを強調したいと思います。

たとえば、ABCという外部ノードがXYZという別の外部ノードに接続されている場合、ABCがルートに、XYZがルートに強調表示されるため、両方が接続されていることがわかります。

コンピューターに理解させるために、2つの方法を考えました。IDの最後にタグを追加します。たとえば、互いにペアになる各外部ノードの#1のように、または12のようなノードに値を追加します。どちらもcsvファイルにあります。

その後、スクリプトですべてのノードをチェックして、(マウスを置いているノードの)終了IDまたは値が同じノードを見つけ、ホバーしたノードの場合と同じ方法で、このノードからルートまでハイライト表示します。

では、どちらのアイデアが良いのでしょうか?それも可能ですか?ノードIDにアクセスして文字列を確認したり、ノード値にアクセスしたりできますか?はいの場合、どうすればそれを行うことができますか?私はこれを考えました:d3.selectAll("node[value='12']");例えば値のために、しかしこの方法で私は私の方法を使って彼の両親に戻る方法を知りません。

色を変更するために使用する方法は次のとおりです。ルートへの親パスを強調表示します

誰かがこれについて私を助けることができますか?

ありがとう!

ラファエルロペス

さて、私はそれをなんとかすることができました、私はマウスオーバーで一時変数を作成しました。IDと値はノード内のdataというオブジェクトにあるため、必要な実際の属性の前にデータにアクセスする必要があります。値をidに置き換えるか、単にdata.valueを取得する属性に置き換えることができます。

node.on("mouseover", function(p) {

if(p.data.value != "")
{ 
  var temp = p.data.value
  console.log(temp)
}

次に、値がグラフ上の別のノードとペアになっているかどうかを確認し、最初のノードで行ったのと同じ方法で、ペアになっているノードで強調表示を行います。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

D3 ForceGraphはほとんどのノード接続を検索します

分類Dev

d3力指向レイアウトで任意のノードを検索/再センタリングします

分類Dev

D3グラフのノードの検索機能

分類Dev

d3.jsを使用して、有効な有向グラフのノードを検索します

分類Dev

d3ノードデータの変更を選択します

分類Dev

d3選択からすべてのDOMノードを取得します

分類Dev

xslt - 特定のノードでのみ xml を検索します

分類Dev

Mongoはreq.query.idノードでIDを検索します

分類Dev

D3を使用してsvg要素のタグ名を検索します

分類Dev

XPath:テキストノード内のノードを検索します

分類Dev

d3-ツリーを検索し、d3v5のノードとパスを強調表示します

分類Dev

1つの検索ドキュメントのみを返しますが、ノード/エクスプレスを検索するために3つのIDを要求します

分類Dev

ノードの「_id」でMongoDBエントリを検索する正しい方法

分類Dev

IDのchildren / childrenノードで特定の値を検索する

分類Dev

属性IDに基づいてXMLノードのすべての子ノードを検索して取得します

分類Dev

D3 Force Layoutのノードとして円とパスをグループ化しますか?

分類Dev

d3を使用してノードリンクグラフのリンク長を増やします

分類Dev

特定の属性値を持つ最初のノードを検索します

分類Dev

Oracle10gの任意の親ノードのすべての子ノードを検索します

分類Dev

ツリー:他のノードと比較して共通パスが最短のノードを検索します

分類Dev

xmlは親ノードを検索し、simplexmlphpを削除します

分類Dev

D3は、ズーム時にノードのテキストを表示します

分類Dev

ノードを検索するLINQxmlはnullを返します

分類Dev

d3放射状木にノードの色をどのように指定しますか?

分類Dev

モバイル特許訴訟D3のノードの2行にテキストを印刷します

分類Dev

ノックアウトjs、ツリービューで選択されたアイテムからすべての親ノードIDを検索します

分類Dev

Forceレイアウトのd3ノードにテキストラベルを追加します

分類Dev

D3ノードの色を動的に変更します(力指向グラフ)

分類Dev

jqueryxmlは値を持つノードを検索します

Related 関連記事

  1. 1

    D3 ForceGraphはほとんどのノード接続を検索します

  2. 2

    d3力指向レイアウトで任意のノードを検索/再センタリングします

  3. 3

    D3グラフのノードの検索機能

  4. 4

    d3.jsを使用して、有効な有向グラフのノードを検索します

  5. 5

    d3ノードデータの変更を選択します

  6. 6

    d3選択からすべてのDOMノードを取得します

  7. 7

    xslt - 特定のノードでのみ xml を検索します

  8. 8

    Mongoはreq.query.idノードでIDを検索します

  9. 9

    D3を使用してsvg要素のタグ名を検索します

  10. 10

    XPath:テキストノード内のノードを検索します

  11. 11

    d3-ツリーを検索し、d3v5のノードとパスを強調表示します

  12. 12

    1つの検索ドキュメントのみを返しますが、ノード/エクスプレスを検索するために3つのIDを要求します

  13. 13

    ノードの「_id」でMongoDBエントリを検索する正しい方法

  14. 14

    IDのchildren / childrenノードで特定の値を検索する

  15. 15

    属性IDに基づいてXMLノードのすべての子ノードを検索して取得します

  16. 16

    D3 Force Layoutのノードとして円とパスをグループ化しますか?

  17. 17

    d3を使用してノードリンクグラフのリンク長を増やします

  18. 18

    特定の属性値を持つ最初のノードを検索します

  19. 19

    Oracle10gの任意の親ノードのすべての子ノードを検索します

  20. 20

    ツリー:他のノードと比較して共通パスが最短のノードを検索します

  21. 21

    xmlは親ノードを検索し、simplexmlphpを削除します

  22. 22

    D3は、ズーム時にノードのテキストを表示します

  23. 23

    ノードを検索するLINQxmlはnullを返します

  24. 24

    d3放射状木にノードの色をどのように指定しますか?

  25. 25

    モバイル特許訴訟D3のノードの2行にテキストを印刷します

  26. 26

    ノックアウトjs、ツリービューで選択されたアイテムからすべての親ノードIDを検索します

  27. 27

    Forceレイアウトのd3ノードにテキストラベルを追加します

  28. 28

    D3ノードの色を動的に変更します(力指向グラフ)

  29. 29

    jqueryxmlは値を持つノードを検索します

ホットタグ

アーカイブ