Javascript 模拟从下拉菜单/选择菜单单击d3.html上的节点

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

我提到过这样的答案。如果我正确理解了答案，它会模拟选择的点击

function searchNode() {

//find the node

var selectedVal = d3.event.target.value;

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

---

你现在可以参考我的代码，当我从下拉列表中选择时，它会显示一个空面板。请任何人都能给我一个好的解释，引导我到正确的方向，因为我是d3新手。提前感谢

使用数组筛选器查找所选节点

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
    });

---

在您的代码中，d是

未定义的

，您需要从

图中找到它。节点

：

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;
    });

}    

工作代码

---

希望这有帮助

谢谢大家!！这项工作非常出色。想解释一下吗？据我所知，您已经创建了一个变量“name”来捕获下拉列表中的值。然后使用.filter将下拉列表中捕获的名称与节点匹配，并将其放入[0]数组中。根据数组过滤器，调用函数showNodePanel。你能肯定这一点吗？我仍然是一个noob，我希望通过一些解释，这将有助于所有像我这样的noob。谢谢除了一件事之外，你的大部分理解都是正确的。JavaScript数组

filter

函数始终返回一个数组。在这段代码中，由于名称是唯一的，所以只有一个数组元素与所选名称匹配。因此，filter函数返回的数组大小为1。所以我们取索引为0的对应节点。因此，您可以获得所需的节点，只需将该节点传递给

showNodePanel

函数即可显示其详细信息。感谢您为解释该节点所做的大量工作。非常感谢。谢谢你指出我在未定义的“d”上的错误。在帮助下非常努力。然而，我可以看到，将有重复的代码，其中第一个将在功能“淡入”和功能“搜索节点”。是否有任何东西会触发“searchNode”功能的“淡入淡出”？还是别无选择，只能使用调度？因为我很难理解。快去。Gilsha发布的答案是通过调用showNodePanel而不是重新编写类似的代码来实现的。请解释一下，因为我在d3方面还是个新手。。无论如何，非常感谢！不幸的是，我只能标记1个答案，只是为了让您知道您的解决方案也有帮助。谢谢干杯没有什么问题是你能够回避的，这会产生影响：）