Затемняйте цвет элемента svg каждый раз при нажатии кнопки, используя D3 V3 или JavaScript
У меня есть граф 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В D3 есть очень удобный метод темнее (k), который, как следует из названия:
Returns a darker copy of this color. If k is specified, it controls how much darker the returned color should be. If k is not specified, it defaults to 1. The behavior of this method is dependent on the implementing color space.
Итак, в вашем коде вам просто нужно использовать 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>Если нажать кнопку несколько раз, обводка будет почти черной.
Извините, забыл упомянуть, что мой проект сделан с использованием D3 V3. Спасибо