title: React d3.Select is there any way to do this?
body: <p>I have a React topograph graph component utilizing the "react-d3-graph" component and I have been trying for two weeks to figure out how to target a link in the graph with d3.select and cannot make it happen. </p>
  
  <p>The graph is comprised of nodes and links. This is the hierarchy of the HTML output:</p>
  
  <pre><code>&lt;g id="graph-id-graph-container-zoomable"&gt;
  
  &lt;path class="link" d="M863.7507753180932,316.33500179175303A0,0 0 0,1 992.9208716852238,461.10776577072073" id="asw-lab9306a - nlab5320a" x1="863.7507753180932" x2="992.9208716852238" y1="316.33500179175303" y2="461.10776577072073" style="stroke-width: 4; stroke: rgb(211, 211, 211); opacity: 1; fill: none;"&gt;&lt;/path&gt;
  
        &lt;g class="node" cx="808.331973835234" cy="46.111332777044865" id="192.168.1.71" transform="translate(808.331973835234,46.111332777044865)"&gt;
      &lt;path cursor="pointer" opacity="0.2" d="M-10.606601717798213,-10.606601717798213h21.213203435596427v21.213203435596427h-21.213203435596427Z" fill="#57a3ff" stroke="none" stroke-width="1.5"&gt;&lt;/path&gt;
      &lt;text dx="18" dy=".35em" fill="black" font-size="12" font-weight="bold" opacity="0.2"&gt;192.168.1.71&lt;/text&gt;&lt;/g&gt;
  </code></pre>
  
  <p>In my component I am able to target the nodes with the following function:</p>
  
  <pre><code>nodeSelect(id) {    
    d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container-zoomable").selectAll("g[id='" + id + "']").selectAll("path").attr('fill',"red").attr('opacity',"1");  
  }
  </code></pre>
  
  <p>Works like a charm. HOWEVER, for the last two weeks I have tried every iteration of d3.select to target a link, to no avail. Here are a couple of my latest efforts:</p>
  
  <pre><code>d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container-zoomable").selectAll("g").selectAll("path").attr('opacity',"0.2");
  
  d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container-zoomable").selectAll("g").selectAll("path.link").attr('opacity',"0.2");
  
  d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container-zoomable").selectAll("g").selectAll("path#asw-lab9306a - nlab5320a").attr('opacity',"0.2");
  </code></pre>
  
  <p>Nothing works. This is all housed within a master click function in the component which is programmed as follows:</p>
  
  <pre><code>   handleClick = (id) =&gt; {
      d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container-zoomable").selectAll("g").selectAll("path#asw-lab9306a - nlab5320a").attr('opacity',"0.2");
      }
  </code></pre>
  
  <p>The node selector cited above that is working is contained within this same component and, like I said, it is working perfectly. I'm pretty much at my wit's end with this and would appreciate any advice or help. I will be happy to revise my question as needed if more code is required.</p>
  
  <p>So I even tried this ...</p>
  
  <p>The source and target are definitely reporting when I click a link. One of the kind respondents below gave me this code:</p>
  
  <pre><code>onClickLink = (id) = {
      d3.select("#"+id).attr('opacity',"0.2");
   }
  </code></pre>
  
  <p>which did not work because when I console log the ID it is returning only the source node name and not the full ID listed in the HTML code. So then I tried this:</p>
  
  <pre><code>onClickLink = (source, target) = {
      let id = source + "-" + target;
      d3.select("#"+id).attr('opacity',"0.2");
   }
  </code></pre>
  
  <p>and I got "Failed to execute 'querySelector' on 'Document': '#80.107.0.217-nlab3328' is not a valid selector." I am looking at the code and the link does indeed have an ID of "80.107.0.217-nlab3328".</p>