如何通过JS结合JSON的checked属性动态修改CSS中图表的颜色

你可以通过两种方式实现根据checked属性动态修改颜色：

方案1：新增CSS状态类配合JS添加类名（推荐，样式逻辑分离） #

首先修改你的CSS文件，保留原有样式不变，新增两个状态类：

/* checked为true时的绿色样式 */
.link-checked-true {
  stroke: #2ecc71 !important;
}
/* checked为false时的红色样式 */
.link-checked-false {
  stroke: #e74c3c !important;
}

/* 如果需要同步修改对应标签颜色也可以加对应类 */
.label-checked-true {
  fill: #2ecc71 !important;
}
.label-checked-false {
  fill: #e74c3c !important;
}

然后在JS渲染图表节点的时候，根据当前节点的checked值给对应的link元素追加对应类名即可：
如果是用D3.js渲染（你的鱼骨图大概率是D3实现），写法参考：

// 选中所有link元素，追加状态类
d3.selectAll('.link')
  .attr('class', d => `link link-${d.depth} link-checked-${_checked(d)}`)

如果是原生JS渲染：

// d为当前节点数据，linkElement为当前生成的link DOM对象
const checkedStatus = _checked(d)
linkElement.classList.add(`link-checked-${checkedStatus}`)

方案2：JS直接设置内联样式（无需修改CSS） #

直接在渲染节点的时候通过JS设置stroke属性，内联样式优先级高于CSS文件定义的样式，不需要加!important：
D3写法参考：

d3.selectAll('.link')
  .style('stroke', d => _checked(d) ? '#2ecc71' : '#e74c3c')

原生JS写法参考：

linkElement.style.stroke = _checked(d) ? '#2ecc71' : '#e74c3c'

注意事项 #

• 不要删除原有.link-0、.link-1等类，避免覆盖预设的stroke-width等样式
• 如果部分节点没有checked属性，可以给_checked方法加默认值兜底，比如：

  _checked = function(d){ return d.checked ?? true; }
  

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