d3.js Dropdown-Menü - wählen verwandten Knoten

Question

ich den Code unter einem Drop-Down für die Erstellung von:

var arrayOfGroups = []; 

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

var newArray = makearray(); 

var container = document.getElementById('selectContainer') 
var dropdown = creatSelectDropDown('thisDropdown', newArray); 

dropdown.onchange = function(event) { 
    console.log(event) 
    node.style('stroke', 'white') 
    .style('stroke-width', '1px'); 

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

container.appendChild(dropdown) 

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.id = array[i]; 
    dropdown.options.add(option); 
    } 
    return dropdown; 
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

Dieser Code wählt Knoten, das Problem ist, dass ich diesen Code will aus den Knoten wählen zu ihrer ID und das ist, was ich es nicht funktionieren lassen konnte und es hat nur eine Option, die undefiniert ist. Ich möchte es mir ein paar andere Optionen wie map1 zeigen, map2 usw., und ich habe die Daten unter:

var thisData = { 
 
\t "nodes" : [{ 
 
\t \t \t "id" : "C47676", 
 
\t \t \t "name" : "name1", 
 
\t \t \t "x" : 1209, 
 
\t \t \t "y" : 41 
 
\t \t }, { 
 
\t \t \t "id" : "C58435", 
 
\t \t \t "name" : "name2", 
 
\t \t \t "x" : 483, 
 
\t \t \t "y" : 227 
 
\t \t }, { 
 
      . 
 
      . 
 
      . 
 
     }], 
 
\t "links" : [{ 
 
\t \t \t "id" : "K14724 ", 
 
\t \t \t "name" : "name3", 
 
\t \t \t "x1" : 983, 
 
\t \t \t "y1" : 461, 
 
\t \t \t "x2" : 983, 
 
\t \t \t "y2" : 524, 
 
\t \t \t "x3" : 985, 
 
\t \t \t "y3" : 524, 
 
\t \t \t "x4" : 985, 
 
\t \t \t "y4" : 461 
 
\t \t }, { 
 
\t \t \t "id" : "K85944 ", 
 
\t \t \t "name" : "name4", 
 
\t \t \t "x1" : 983, 
 
\t \t \t "y1" : 524, 
 
\t \t \t "x2" : 983, 
 
\t \t \t "y2" : 525, 
 
\t \t \t "x3" : 985, 
 
\t \t \t "y3" : 525, 
 
\t \t \t "x4" : 985, 
 
\t \t \t "y4" : 524 
 
\t \t }, { 
 
      . 
 
      . 
 
      . 
 
     }]};

Frage ist: Ich brauche Hilfe, die die Knoten entsprechend ihrer ID wählen das funktioniert nicht und ich brauche einige Optionen wie map1, map2 undefined. Gibt es eine Idee, die helfen kann?

Answer 1

Für die ID statt dessen:

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

Ich würde empfehlen, das Array zu arrayOfIds als es ist nicht Gruppen Umbenennung mehr:

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

ID Nummer anstelle von Gruppe wie so verwenden würde.

Und dann in der onchange würde ich d.id vergleichen als d.group. Aber es gibt einen Fehler auf der Linie, wo Sie vergleichen:

return d.group == event.id; 

Es dies sein sollte:

return d.group == event.target.value; 

Der Target.Value ist der Wert der Option Tag. Als das was Sie tun möchten, erhalten Sie die Knoten mit der gleichen ID wie der Wert, den Sie ausgewählt haben. Keine Ahnung, warum du das geändert hast. Das einzige, was Sie geändert haben sollten, ist das Knotenattribut, mit dem Sie vergleichen möchten.

So gesehen, wie Sie IDs vergleichen wollen es sein sollte:

return d.id == event.target.value; 

Was die map1, map2, ich habe keine Ahnung, was du hier besprochen ...