データの一部に応じてD3ハイライト表示

Question

これは私のデータ（JSON）であり、データはこのように150,000以上の行です。私はこのデータを使用してノードとノード間の線をD3に描画しています。そのためには本当に良いコードがあります。私はまた、のようなドロップダウンメニューの何かにするためにコードの一部を持っている

"nodes" : [{ 
      "id" : "r75832", 
      "name" : "name1", 
      "x" : 1209, 
      "y" : 41 
     }, { 
      "id" : "q26475", 
      "name" : "name2", 
      "x" : 483, 
      "y" : 227 
     }, 
. 
. 
. 

"links" : [{ 
      "id" : "abc ", 
      "name" : "t5.4.6.2 , 4.5.0.7, p00738", 
      "x1" : 348, 
      "y1" : 341, 
      "x2" : 349, 
      "y2" : 340, 
      "x3" : 351, 
      "y3" : 340, 
      "x4" : 350, 
      "y4" : 341 
     }, { 
      "id" : "def ", 
      "name" : "a1.2.3.4 , 6.7.8.9, b00574", 
      "x1" : 349, 
      "y1" : 340, 
      "x2" : 349, 
      "y2" : 339, 
      "x3" : 351, 
      "y3" : 339, 
      "x4" : 351, 
      "y4" : 340 
     }, 
. 
. 
. 

：私が欲しいもの

'E met' : { 
    'a met' : { 
    'M00175 name1' : {}, 
    }, 
    'b met' : { 
    'M00567 name2' : {}, 
    'M00174 name3' : {}, 
    }, 

. 
. 
. 
} 

は、誰かがM00174をクリックするとドロップダウンメニューで、私はいくつかのノードにしたいときということです強調表示され、誰かがM00567をクリックすると、M00567などに属する他のいくつかのノードが強調表示されます。

この時点で、特定のデータを定義して150,000行以上のコードをハイライト表示する方法と、ハイライトさせる方法について説明しました。何か案は？

Answer 1

これを行う方法は、ドロップダウンの変更時に関数を呼び出すことです。そして、ノードをループして境界線を付けます（ハイライト表示されます）。ここで

は、私が一緒に入れているフィドルです：https://jsfiddle.net/reko91/dFK3K/287/

まず第一に、私はこのデータのセット内にあるすべての異なるグループの配列を作った：

var arrayOfGroups = []; 

function makearray() { 

    node.each(function(d) { 
    if (arrayOfGroups.indexOf(d.group) < 0) { 
     arrayOfGroups.push(d.group) 
    } 
    }) 
    console.log(arrayOfGroups) 
    return arrayOfGroups; 
} 

これは基本的に行うことは行くです作成された配列がそのグループを持っていない場合は、そのグループをそのノードにプッシュします。その後

私はこの配列に基づいて、ドロップダウンを作成します。

var container = document.getElementById('selectContainer') 

が発生したドロップダウンゲット：

function creatSelectDropDown(id, array) { 

    var dropdown = document.createElement("select"); 
    dropdown.id = id; 

    for (var i = 0; i < array.length; i++) { 
    var option = document.createElement("option"); 
    option.text = array[i]; 
    option.value = array[i]; 
    dropdown.options.add(option); 
    } 


    return dropdown; //return drop down list 
} 

がコンテナを取得します（私は、HTMLのdiv要素を追加しました）

var dropdown = creatSelectDropDown('thisDropdown', newArray); 

添付のドロップダウンをコンテナに追加します。

container.appendChild(dropdown) 

その後はチェンジ機能の作成：

dropdown.onchange = function(event) { 
    console.log(event) 
    node.style('stroke', 'white') //this is to set all nodes to default stroke 
    .style('stroke-width', '1px'); 

    node.filter(function(d) { 
     return d.group == event.target.value; 
    }) 
    .each(function(d) { 
     console.log(d) 
     console.log('d') 
    }) 
    .style('stroke', 'red') 
    .style('stroke-width', '5px') 
} 

をこれがないと、その値に等しいグループを持つノードをフィルタリングするために、この値を使用して、変更に選択の値を取得することです。

これだけです。ドロップダウンを変更すると、ドロップダウンでオプションの値が取得され、オプションタグと同じグループを持つノードにフィルタリングされ、すべてのノードにストロークが追加されます。