title: Darken the color of svg element each time on button click using D3 V3 or JavaScript
body: <p>I have a D3 graph consisting of various Nodes/Links. In this i have a functionality in which when i click on node and then click on a button it reduces the opacity of every other element except the intermediate connected nodes and links and also changes of link to Blue to show the circuit.</p>
  
  <p><a href="https://i.stack.imgur.com/zDcKb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zDcKb.png" alt="sample image"></a></p>
  
  <p>What I want to achieve is when multiple such nodes are selected one after one, the link which are common with any previous circuit, it should change it's blue color to one shade darker.</p>
  
  <p>I do not want to do this using increasing opacity, I want to change to color to be one shade darker than previous.</p>
  
  <p>I have made the logic to find common links in circuit but using D3/JS, how to increase color code to a darker tone each time for any svg element on button click.</p>
  
  <p>For example: In the code given below I want to achieve a darker tone of blue each time on button click, instead of changing it to red.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>d3.select('#toDO').on('click', function() {
  d3.select("#PathID").attr("stroke" , "red")
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;svg height="210" width="400"&gt;
    &lt;path id="PathID" d="M150 0 L75 200" stroke="blue"/&gt;
  &lt;/svg&gt;
  &lt;button id="toDO"&gt;Click&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>