每次使用D3 V3或JavaScript單擊按鈕時，使svg元素的顏色變暗

Question

我有一個由各種節點/鏈接組成的D3圖。 在此功能中，當我單擊節點然后單擊按鈕時，它會減少除中間連接的節點和鏈接之外的所有其他元素的不透明度，並且還會更改為藍色的鏈接以顯示電路。

我想要實現的是，一個接一個地選擇多個此類節點時，這是任何先前電路所共有的鏈接，它應該將其藍色更改為較暗的陰影。

我不想使用增加的不透明度來執行此操作，我想將顏色更改為比以前更深的陰影。

我已經做出了在電路中找到通用鏈接的邏輯，但是使用了D3 / JS，如何每次單擊按鈕時將任何svg元素的顏色代碼增加為更暗的色調。

例如：在下面給出的代碼中，我希望每次單擊按鈕時都獲得較深的藍色調，而不是將其更改為紅色。

 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> 

Answer 1

D3有一個非常方便的名為darker（k）的方法 ，顧名思義，該方法是：

返回此顏色的深色副本。 如果指定了k，它將控制返回的顏色應該變深多少。 如果未指定k，則默認為1。此方法的行為取決於實現的色彩空間。

因此，在您的代碼中，您只需要使用d3.color （D3 v4或v5）：

d3.color(d3.select("#PathID").attr("stroke")).darker()

或d3.rgb （D3 v3）：

d3.rgb(d3.select("#PathID").attr("stroke")).darker()

這是演示：

 d3.select('#toDO').on('click', function() { d3.select("#PathID").attr("stroke", d3.rgb(d3.select("#PathID").attr("stroke")).darker()) }) 

 <script src="https://d3js.org/d3.v3.min.js"></script> <button id="toDO">Click</button> <br> <svg height="210" width="400"> <path id="PathID" d="M150 0 L75 200" stroke="blue" stroke-width="10px"/> </svg> 

如果多次單擊該按鈕，則描邊將幾乎變為黑色。