I am working on a treediagram in d3 and I am now trying to 'mark out' a path. So when the user click on a certain link in the three it turns red.

The problem I am facing is that. When I click my link I get the right id stored in "d.id" but I cannot give it style that way

d3.select('._' + d.id).style("stroke", "red")

This is the rest of the links code.

  let link = svg.selectAll('path.link')
      .data(links, function(d) { return d.id; })
    // Enter any new links at the parent's previous position.
    let linkEnter = link.enter().insert('path', "g")
        .attr("class", "link")
        .on('click', pathdir)
        .attr('d', function(d){
          let o = {x: source.x0, y: source.y0}
          return diagonal(o, o)
        });
    // UPDATE
    let linkUpdate = linkEnter.merge(link);
    // Transition back to the parent element position
    linkUpdate.transition()
        .duration(duration)
        .attr('d', function(d){ return diagonal(d, d.parent) });
    // Remove any exiting links
    let linkExit = link.exit().transition()
        .duration(duration)
        .attr('d', function(d) {
          let o = {x: source.x, y: source.y}
          return diagonal(o, o)
        })
        .remove();
    // Store the old positions for transition.
    nodes.forEach(function(d){
      d.x0 = d.x;
      d.y0 = d.y;
    });

    function diagonal(s, d) {
      const path = `M ${s.y} ${s.x} C ${(s.y + d.y) / 2} ${s.x}, ${(s.y + d.y) / 2} ${d.x}, ${d.y} ${d.x}`
      return path
    }

    function pathdir(event, d){
      d3.select('._' + d.id).style("stroke", "red")
    }

It's my first time coding d3 so any help is useful!