Question

我目前正在为这个项目使用d3强制布局。目前，每当我点击某个节点时，它会显示＆＃34;详细信息＆＃34;或面板上节点的名称，并显示相邻节点。当我从下拉列表中选择时，我想实现这一点。这意味着用户可以点击节点获取＆＃34;详细信息＆＃34;或从下拉列表中选择以查看详细信息。我正在考虑使用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

希望这有帮助！

从下拉列表/选择模拟d3.html上的节点点击

2 个答案: