I am working with a D3 graph that includes Nodes/Links. I have implemented a feature where clicking on a node and then a button will decrease the opacity of all other elements except for the interconnected nodes and links, changing them to blue to indicate a circuit.
https://i.sstatic.net/zDcKb.png
My goal is to have the common links in multiple selected circuits change to a slightly darker shade of blue.
Instead of adjusting the opacity, I want to achieve this effect by darkening the color tone each time.
I have the logic to identify common links within a circuit using D3/JS. How can I incrementally darken the color of an SVG element on button click?
For instance, in the code snippet provided below, I aim to progressively darken the blue color instead of switching it to red upon button click.
d3.select('#toDO').on('click', function() {
d3.select("#PathID").attr("stroke" , "red")
})<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="210" width="400">
<path id="PathID" d="M150 0 L75 200" stroke="blue"/>
</svg>
<button id="toDO">Click</button>