D3.js折线图如何修改线条颜色？CSS样式被覆盖该如何解决

核心原因 #

你修改CSS里的stroke颜色不生效，根本不是外部其他来源的CSS规则覆盖了你的样式，问题出在当前的D3渲染逻辑里：代码给每一条生成的折线path元素，手动加了stroke属性的内联样式。
根据CSS优先级规则，内联样式的权重远高于外部类选择器的权重，会直接覆盖你在.chart-wrapper .line里定义的所有stroke规则，所以不管你把CSS里的颜色从steelblue改成pink还是其他颜色，都会被JS里.style('stroke', color(y))设置的颜色顶掉，看起来就像“样式被其他规则覆盖”。

对应解决方案 #

根据你的使用场景，可以选以下任意一种方式：

• 单系列折线图场景，直接删除JS里手动设置stroke的代码
  找到渲染折线的代码段，删掉.style('stroke', color(y))这一行：

  yObjs[y].path = chartObj.svg
    .append('path')
    .datum(chartObj.data)
    .attr('class', 'line')
    .attr('d', yObjs[y].line)
    // 删掉这行，就不会再生成覆盖CSS的内联stroke样式
    // .style('stroke', color(y))
    .attr('data-series', y)
    // 后面的鼠标事件逻辑保持不变就行
  

  删完之后，你在CSS里定义的stroke: pink就会正常生效。

• 多系列折线图场景，把颜色配置全部迁移到CSS统一管理
  你的代码里已经给每条线加了data-series属性用来标记不同数据系列，完全可以不用JS内置的color(y)方法设置颜色，直接在CSS里通过属性选择器给不同系列的线设不同颜色：

  /* 通用样式统一设置 */
  .chart-wrapper .line {
    fill: none;
    stroke-width: 5px;
  }
  /* 针对不同系列单独设置颜色，改色直接在这改就行 */
  .chart-wrapper .line[data-series="你的第一个系列名"] {
    stroke: pink;
  }
  .chart-wrapper .line[data-series="你的第二个系列名"] {
    stroke: skyblue;
  }
  

  同样删掉JS里的.style('stroke', color(y))那行即可，后续调整所有配色都只需要改CSS文件，不用来回翻JS代码。

• 临时快速验证场景，用CSS最高优先级规则强制覆盖
  如果不想改动现有JS逻辑，可以在CSS的stroke规则后加!important强制抬升优先级，强制盖过JS生成的内联样式：

  .chart-wrapper .line {
    fill: none;
    /* 加!important后优先级最高，会覆盖JS的内联stroke设置 */
    stroke: pink !important;
    stroke-width: 5px;
  }
  

  注意：多系列图表不建议用这个方法，!important会把所有线的颜色强制统一，失去不同系列的颜色区分能力。

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