Затемняйте цвет элемента SVG каждый раз при нажатии кнопки, используя D3 V3 или JavaScript

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>

Если вы нажмете кнопку несколько раз, ход будет почти черным.