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

【问题标题】：d3 force layout: highlight nodes in a group and their neighoursd3 强制布局：突出显示组中的节点及其邻居
【发布时间】：2019-03-01 16:12:08
【问题描述】：

我想突出显示某个组中的节点和边。我有一个函数 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;
              }

          }

【问题讨论】：

你搜索过 SO 吗？你不是第一个问这个的人。
我做到了，只是找不到一种方法可以在 highlightPathway 函数中传递圆形对象而不是节点对象。
我为每个节点添加了一个唯一的 id 并尝试访问 DOM，但仍然无法获取节点 DOM：function highlightPathway(id) { if (toggle == 0) { sel_nodes=graph. nodes.filter(function(d) { return d.pathway==id; }) sel_nodes.forEach(function(node) { console.log(node) if (node.pathway == id) { var tmp_node = d3.select ("#node_"+node.id) console.log("#node_"+node.name) console.log(tmp_node)
在评论中添加大量源代码并不能提高阅读能力，请使用问题的编辑。如果节点有一个已知的id/pathway 为什么不只是d3.select(".node_path_"+id) 并基于pathway 向节点添加一个自定义类

标签： d3.js force-layout

【解决方案1】：

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

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

谢谢！

【讨论】：