title: selecting/deselecting by clicking in d3
body: <p>I am trying to select/deselect lines(links) of clicking. But I already have mouseover function it should be different than mouseover, when I select a line that line's color needs to change and it needs to draw a pie chart and deselecting should be available of clicking too.</p>
  
  <p>What I have: </p>
  
  <pre><code>    nodeenter.on("mouseover", function(d){ 
  console.log(d); 
   d3.select(this).attr("fill", "yellow");
  
  return tooltip.style("visibility", "visible").text("This node's id is: " + d.id + " and " + "Name: " + d.name );})
  .on("mousemove", function(){
  
      return tooltip.style("top",
      (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
  .on("mouseout", function(d){
      d3.select(this).attr("fill", "rgb(0, 0, " +(d*10) + ")");
      return tooltip.style("visibility", "hidden");});
  
  link.on("mouseover", function(d){
      console.log(d)
       d3.selectAll('.'+d.id).style('stroke','aqua');
      return tooltip.style("visibility", "visible").text("This line's id is: " + d.id + " and " + "Name: " + d.name);})
  .on("mousemove", function(){return tooltip.style("top",
      (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
  .on("mouseout", function(d){
       d3.selectAll('.'+d.id).style('stroke','black');
       return tooltip.style("visibility", "hidden");});
  
  //to select
  link.on("click", function(d){
    if (!d3.select(this).classed("selected") ){
       d3.select(this).classed("selected", true)
       d3.select(this).style("stroke","red");
    }else{
       d3.select(this).classed("selected", false);
       d3.select(this).style("stroke","black");
    }
  });
  </code></pre>