如何用D3 V3/JS实现点击按钮时逐步加深SVG元素颜色

这需求很有意思！要实现重复连线的蓝色逐次加深（完全不靠透明度），核心思路是给每条连线追踪被纳入通路的次数，然后基于次数调整蓝色的深浅——用HSL颜色模式来做会比RGB更直观，能保证颜色始终是蓝色系的加深，不会跑偏。

核心步骤说明 #

• 给连线绑定计数数据：用D3的data()方法给每条连线存储一个计数，记录它被重复选中的次数，这样不会污染DOM属性，也符合D3的数据绑定逻辑。
• 基于计数计算加深的蓝色：蓝色的HSL色相值固定为240，饱和度保持100%保证色彩纯度，每次点击只降低亮度值（lightness），就能实现从亮蓝到深蓝的渐变加深。
• 控制亮度下限：设置亮度最低不低于10%，避免线条太暗几乎看不见。

单连线示例代码 #

把你提供的代码修改后，就能实现点击按钮逐次加深蓝色的效果：

<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" stroke-width="3"/>
</svg>
<button id="toDO">Click to Darken Blue</button>

<script>
// 初始化连线的计数和初始亮蓝色
d3.select("#PathID")
  .attr("stroke", "hsl(240, 100%, 50%)")
  .data([{count: 0}]); // 用data存储计数

d3.select('#toDO').on('click', function() {
  const path = d3.select("#PathID");
  const currentData = path.datum();
  currentData.count += 1;
  
  // 计算新亮度：初始50%，每次减10%，最低保留10%可见度
  const newLightness = Math.max(10, 50 - currentData.count * 10);
  path.attr("stroke", `hsl(240, 100%, ${newLightness}%)`);
});
</script>

扩展到多重复连线的场景 #

既然你已经能识别通路中的重复连线，只需要把上述逻辑批量应用到这些连线即可。比如给所有重复连线加一个类.duplicate-path，然后批量处理：

d3.select('#toDO').on('click', function() {
  // 遍历所有重复连线
  d3.selectAll('.duplicate-path').each(function() {
    const path = d3.select(this);
    // 初始化计数（如果之前没绑定的话）
    const currentData = path.datum() || {count: 0};
    currentData.count += 1;
    path.datum(currentData);
    
    const newLightness = Math.max(10, 50 - currentData.count * 10);
    path.attr("stroke", `hsl(240, 100%, ${newLightness}%)`);
  });
});

这样每次点击按钮，所有重复的连线都会根据自己的被选中次数，对应加深蓝色色调，完全不需要调整透明度就能达到你想要的效果。

内容的提问来源于stack exchange，提问作者Ash