淡出sankey鏈接（如果它們未連接到節點onclick）

Question

我希望能夠在單擊Sankey圖時淡出sankey圖中未連接到特定節點的所有鏈接。

       var link = svg.append("g").selectAll(".link")
           .data(energy.links)
           .enter().append("path")
           .attr("class", "link")
           .attr("d", path)
           .style("stroke-width", function(d) { return 16; })
           .style("stroke", function(d){return d.color;})
           .sort(function(a, b) { return b.dy - a.dy; });

結果應該是，當單擊節點時，所有未連接的鏈接都會消失。

我無法想到執行此操作所需的邏輯。

Answer 1

鏈接對象具有源和目標節點對象。 如果您選擇所有鏈接並根據您使用的節點的ID是否與單擊的節點相匹配來設置其不透明度樣式。 例如，如果“名稱”是唯一ID，則

node.on("click", function(d) {
   link.style("opacity", function(l) {
      if (l.source.name == d.name || l.target.name == d.name) {
         return 1
      } else {
         return 0.1
      }
   })
})