使用D3/JavaScript更改所选li选项的颜色

我正在使用D3.js创建一个唯一值列表（来自JSON查询），我想更改所选li的文本颜色。代码段下面给出了执行该操作的函数。我的问题是，当我单击列表中的另一个值时，颜色不会重置

//JSON数据
常数数据=[
{
“日期”：“2008-11”，
“价值”：“A”，
“num”：7.8
},
{
“日期”：“2007-11”，
“价值”：“B”，
“num”：7.8
}
];
//解析日期以获得正确的时间格式
var parseDate=d3.time.format（“%Y-%m”）.parse；
//设置筛选列表（或下拉列表）功能的数据格式
函数格式化数据（数据）{
var valueMap={}；
var mainFields=[“日期”，“数值”]；
data.forEach（函数（d）{
d、 num=+d.num；
var值=d.值；
valueMap[值]=[]；
mainFields.forEach（函数（字段）{
valueMap[Value].push（d[field]）；
}); 
});
返回值映射；
}
//下拉创建函数
函数下拉列表（）{
//下拉列表值更改的处理程序
const valueMap=格式数据（数据）；
var dropdownChange=函数（d）{
d3.选择（“svg”）.remove（）；
const newData=data.filter（函数（项）{
返回项。值==d；
});
//更改选定li选项的文本颜色
d3.选择（此）.样式（“颜色”，“c7003b”）；
};
//获取值的名称，用于下拉列表
var=Object.keys（valueMap.sort（）；
var dropdown=d3。选择（“下拉菜单”）
.插入（“ul”、“svg”）
.classed（'selector'，true）
下拉列表。选择全部（“li”）
.数据（活动）
.enter（）.append（“li”）
.attr（“id”），（函数（d）{
返回d[0].toUpperCase（）+d.replace（/g，，）.slice（1，d.length）；
}))
.text（功能（d）{
返回d[0].toUpperCase（）+d.replace（/g，，）.slice（1，d.length）；
}) 
。打开（“单击”，下拉更改）；
var initialData=valueMap[活动[0]]；
}
下拉菜单（）
/*css转到此处*/
身体{
字体系列：“Proxima Nova”，无衬线；
字体大小：12px；
}
.柔性容器{
填充：0；
保证金：0；
列表样式：无；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
}
.flex-item1{
宽度：33%；
高度：自动；
边缘顶部：10px；
字体大小：粗体；
文本对齐：居中；
}
.flex-item2{
宽度：67%；
高度：自动；
边缘顶部：10px；
字体大小：粗体；
文本对齐：居中；
}
g-hed{
文本对齐：左对齐；
文本转换：大写；
字体大小：粗体；
字体大小：22px；
保证金：3px0；
}
.g-source-bold{
文本对齐：左对齐；
字体大小：10px；
字体大小：粗体；
}
g源{
利润率：10px0；
}
.g-source-bold{
文本对齐：左对齐；
字体大小：10px；
}
.g-简介{
字体大小：16px；
保证金：0px 0px 10px 0px；
}
.g-标签{
字体系列：“Proxima Nova”，无衬线；
填充物：白色；
字体大小：粗体；
字体大小：14px；
}
g图{
身高：100%；
}
.g图svg{
宽度：100%；
身高：100%；
}
.轴线{
填充：无；
冲程：#ccc；
笔划阵列：2px 3px；
形状渲染：边缘清晰；
笔画宽度：1px；
}
.轴文本{
字体系列：“Proxima Nova”，无衬线；
字体大小：13px；
指针事件：无；
填充：#7e7e7e；
}
.y轴文本{
文本锚：结束！重要；
字体大小：14px；
填充：#7e7e7e；
}
.域名{
显示：无；
}
.线路{
冲程：#2f5491；
笔画宽度：3px；
填充：无；
}
.覆盖{
填充：无；
指针事件：全部；
}
.焦点{
字体大小：14px；
}
.焦点圈{
填充物：5e8dc9；
}
保险商实验室{
填充：0；
列表样式类型：无；
}
李先生{
填充：20px 0 20px 0；
边框顶部：1px实心#ffffff；
边框底部：3px实心#e0；
背景：#fff；
}







与其使用
样式
属性内联应用css，不如对元素应用css类；然后，您可以轻松地更改“活动”元素的显示方式，而无需深入研究JS代码

让我们假设您将向当前选择的元素添加一个类
active

激活
dropdownChange
时，您希望删除任何现有的
active
类，并添加触发
dropdownChange
的元素。令人高兴的是，
此
设置为触发事件的元素，因此您可以轻松地从那里开始工作：

// get the parent ul element, remove the `active` class from all children
this.parentNode.childNodes.forEach( (e) => {
  e.classList.remove('active');
} );
// add `active` to the element that triggered the function
this.classList.add('active');

现场：


//JSON数据
常数数据=[{
“日期”：“2008-11”，
“价值”：“A”，
“num”：7.8
},
{
“日期”：“2007-11”，
“价值”：“B”，
“num”：7.8
}
];
//解析日期以获得正确的时间格式
var parseDate=d3.time.format（“%Y-%m”）.parse；
//设置筛选列表（或下拉列表）功能的数据格式
函数格式化数据（数据）{
var valueMap={}；
var mainFields=[“日期”，“数值”]；
data.forEach（函数（d）{
d、 num=+d.num；
var值=d.值；
valueMap[值]=[]；
mainFields.forEach（函数（字段）{
valueMap[Value].push（d[field]）；
});
});
返回值映射；
}
//下拉创建函数
函数下拉列表（）{
//下拉列表值更改的处理程序
const valueMap=格式数据（数据）；
var dropdownChange=函数（d）{
d3.选择（“svg”）.remove（）；
const newData=data.filter（函数（项）{
返回项。值==d；
});
//获取父ul元素，从子元素中删除'active'类
this.parentNode.childNodes.forEach（（e）=>{
e、 classList.remove（'active'）；
} );
//将此节点标记为活动
this.classList.add（'active'）；
};
//获取值的名称，用于下拉列表
风险值活动