имитирующий щелчок узлов на d3.html из выпадающего меню/выберите

Question

В настоящее время я использую схему силы d3 для этого проекта. В настоящий момент, когда я нажимаю на узел, он показывает «детали» или имя узла на панели и показывает соседние узлы. Я хотел бы добиться этого, когда я выберу из раскрывающегося списка. Это означает, что пользователь может либо щелкнуть по узлу, чтобы получить «детали», либо выбрать из раскрывающегося списка, чтобы увидеть подробности. Я думал использовать d3.dispatch, однако мне трудно понять это.

Я упомянул ответы, как putting the country on drop down list using d3 via csv file. Если я правильно понимаю ответ, он имитирует щелчок выбора.

function searchNode() { 

//find the node 

var selectedVal = d3.event.target.value; 

if (selectedVal == d.code) { 
//alert(selectedVal) 
showNodePanel(node); 
}; 
} 

Вы можете сослаться на мои коды на http://plnkr.co/edit/E8MfM6wfbt56i8nkf3Ym?p=preview В данный момент, когда я выбираю из выпадающего списка, он показывает пустую панель. Пожалуйста, можете ли вы направлять меня в правильном направлении с хорошим объяснением, поскольку я совершенно новичок в d3. Заранее спасибо

Answer 1

Используйте фильтр массива, чтобы найти выбранный узел.

Метод filter() создает новый массив со всеми элементами, которые проходят тест, реализованный предоставленной функцией.

Здесь filter функция возвратит -

[{"code":"Count","group":14,"size":"5","name":"Count","index":8,"weight":1,"x":597.5669800627312,"y":211.07030994307163,"px":597.457141196603,"py":211.1405159319426}] 

код:

var select = d3.select("#searchNode") 
    .append("select") 
    .on('change.sn', searchNode) 
    .on('change.smp', function() { 
     var name = this.value; //Name of the node 
     var node = graph.nodes.filter(function(d){ return d.name==name; })[0]; //Find the node with the selected name. 
     showNodePanel(node); //Show details 
    }); 

Answer 2

В вашем коде d является undefined вам нужно найти его из graph.nodes:

function searchNode() { 

//find the node 

var selectedVal = d3.event.target.value; 

if (selectedVal == d.code) {//this d is undefined you need to search this.. 
//alert(selectedVal) 
showNodePanel(node); 
}; 
} 

Вам нужно сделать функцию поиска узла, как это:

function searchNode() { 

    //find the node 

    var selectedVal = d3.event.target.value; 
    //iterate though all the nodes 
    graph.nodes.every(function(n){ 
     if (n.code == selectedVal){ 
     var d = n; 
     opacity = 0.05; 
     //code for hiding nodes same as you have written in fade function 
     //select all nodes 
     d3.selectAll(".node").style("stroke-opacity", function(o) { 
       thisOpacity = isConnected(d, o) ? 1 : opacity; 
       this.setAttribute("fill-opacity", thisOpacity); 
       return thisOpacity; 
     }); 
     //select all links 
     d3.selectAll(".link").style("stroke-opacity", function(o) { 
       return o.source === d || o.target === d ? 1 : opacity; 

     }); 
     return false; 
     } 
     return true; 
    }); 

}  

Рабочим код here

Надеется, что это помогает!