Question

我想突出显示特定组中的节点和边。我有一个connectedNodes函数，该函数突出显示一个节点及其直接邻居。

          function connectedNodes() {

              if (toggle == 0) {

                  //Reduce the opacity of all but the neighbouring nodes
                  d = d3.select(this).node().__data__;
                  console.log(this)
                  console.log(d)
                  var sel_groups = new Array(d.pathway);

                  node.style("opacity", function (o) {
                      if (neighboring(d, o) | neighboring(o, d)) {
                        sel_groups.push(o.pathway)
                      }
                      return neighboring(d, o) | neighboring(o, d) ? 1 : 0.05;
                  });

                  sel_groups = sel_groups.filter((v, i, a) => a.indexOf(v) === i)

                  label.style("opacity", function (o) {
                      return neighboring(d, o) | neighboring(o, d) ? 1 : 0.05;
                  });

                  link.style("opacity", function (o) {
                      return d.index==o.source.index | d.index==o.target.index ? 1 : 0.05;
                  });

                  linkText.style("opacity", function (o) {
                      return d.index==o.source.index | d.index==o.target.index ? 1 : 0.05;
                  });

                  group.style("opacity", 0.05);
                  groupText.style("opacity", 0.05);

                  group.filter(function(d) { if (sel_groups.indexOf(d.id) != -1) { return true } }).style("opacity", 1);
                  groupText.filter(function(d) { if (sel_groups.indexOf(d.id) != -1) { return true } }).style("opacity", 1);

                  toggle = 1;
              } else {
                  //Put them back to opacity=1
                  node.style("opacity", 1);
                  label.style("opacity", 1);
                  link.style("opacity", 1);
                  linkText.style("opacity", 1);
                  group.style("opacity", 1);
                  groupText.style("opacity", 1);
                  toggle = 0;
              }

          }

当我单击该组并突出显示该组中的节点（以及直接邻居和链接）时，我喜欢激活一个功能。我试图以迭代方式调用connectedNode函数，但不知何故它没有传递节点对象？

          function highlightPathway(id) {

              if (toggle == 0) {
                  sel_nodes=graph.nodes.filter(function(d) { return d.pathway==id; })
                  sel_nodes.forEach(connectedNodes)
                  toggle = 1;
              } else {
                  //Put them back to opacity=1
                  node.style("opacity", 1);
                  label.style("opacity", 1);
                  link.style("opacity", 1);
                  linkText.style("opacity", 1);
                  group.style("opacity", 1);
                  groupText.style("opacity", 1);
                  toggle = 0;
              }

          }

Answer 1

是的，路径是节点的属性，所以我意识到这是可行的：

              sel_circles=svg.selectAll("circle").filter(function(d){
                return d.pathway == id;
              })

谢谢！

d3强制布局：突出显示组中的节点及其邻居

1 个答案: