从 dropdown/select 模拟点击 d3.html 上的节点

Question

我目前正在为此项目使用 d3 force 布局。目前，每当我单击一个节点时，它都会在面板上显示 "details" 或节点名称，并显示相邻节点。当我从下拉列表中选择时，我想实现这一点。这意味着用户可以单击节点以从下拉列表中获取 "details" 或 select 以查看详细信息。我想使用 d3.dispatch，但我很难理解它。

我参考了 putting the country on drop down list using d3 via csv file 等答案。如果我正确理解答案，它会模拟 selection 的点击。

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 参考我的代码目前，当我从下拉列表中 select 时，它显示一个空面板。因为我对 d3 很陌生，所以请任何人都可以通过一个很好的解释来指导我正确的方向。提前致谢

Answer 1

使用数组过滤器查找所选节点。

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

此处filter函数将return -

[{"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

希望对您有所帮助！

从 dropdown/select 模拟点击 d3.html 上的节点

simulating clicking of nodes on d3.html from dropdown/select

javascript

d3.js

drop-down-menu

force-layout