每次使用D3 V3或JavaScript

Question

我有一个由各种节点/链接组成的D3图表。在这个我有一个功能，当我点击节点，然后点击一个按钮，它减少了除中间连接的节点和链接之外的所有其他元素的不透明度，以及链接更改为蓝色以显示电路。

我想要实现的是当一个接一个地选择多个这样的节点时，这个节点与任何先前的电路相同，它应该将它的蓝色改为一个更暗的颜色。

我不想使用增加不透明度来做到这一点，我想改变颜色比以前更暗一些。

我已经制定了在电路中找到常用链接的逻辑，但是使用D3 / JS，如何在按钮点击时为每个svg元素增加颜色代码到更暗的色调。

例如：在下面给出的代码中，我希望每次按下按钮时都会获得更深的蓝色调，而不是将其更改为红色。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

如果多次单击该按钮，则笔划几乎为黑色。