title: d3 javascript clicking a line to change line color - changes all lines
body: <p>I have a force-directed graph and want to change the color of a line between 2 nodes when I click on the line. However, the following code changes the color of all the lines, not just the one I clicked.</p>
  
  <p>My css for the line and the clicked line are:</p>
  
  <pre><code>.link {
    fill: none;
    stroke: #666;
    stroke-width: 2px;
    cursor: pointer;
  }
  
  .link--clicked {
    fill: none;
    stroke: red;
    stroke-width: 2px;
    cursor: pointer;
  }
  </code></pre>
  
  <p>I call a function when clicking on the line using:</p>
  
  <pre><code>var path = svg.append("g").selectAll("path")
      .data(force.links())
      .enter().append("path")
      .attr("class", function(d) { return "link " + d.type; })
      .attr("marker-end", function(d) { return "url(#" + d.type + ")"; })
      .on("click", function(d) { edge_clicked(d); });
  
  function edge_clicked(d) {    
    d3.select("path").classed("link--clicked", false); //remove color class of any previously clicked link
    var clicked = d3.select(this); //select clicked element
    path.classed("link--clicked", true); //set class of clicked link
  }
  </code></pre>
  
  <p>I suspect it has to do with how I am calling the path.classed command which affects all paths/lines not just the clicked line. However, I can't figure out the syntax for the selected line.</p>
  
  <p>Any help is appreciated.</p>