Rather than applying css inline using a style attribute, it's better to apply a css class to the element; you can then easily change how you display your 'active' elements without having dig into your JS code.
Let's assume that you're going to add a class active to whichever element is currently selected.
When you activate dropdownChange, you want to remove any existing active classes and add active the element that triggered dropdownChange. Happily, this is set to the element that triggered the event, so you can easily work from there:
// get the parent ul element, remove the `active` class from all childrenthis.parentNode.childNodes.forEach( (e) => { e.classList.remove('active');} );// add `active` to the element that triggered the functionthis.classList.add('active');In situ:
//JSON Dataconst data = [{"date": "2008-11","Value": "A","num": 7.8 }, {"date": "2007-11","Value": "B","num": 7.8 }];//Parses date for correct time formatvar parseDate = d3.time.format("%Y-%m").parse;//Format data for the filter list (or dropdown) functionfunction formatData(data) { var valueMap = {}; var mainFields = ["date", "num"]; data.forEach(function(d) { d.num = +d.num; var Value = d.Value; valueMap[Value] = []; mainFields.forEach(function(field) { valueMap[Value].push(d[field]); }); }); return valueMap;}//Dropdown creation functionfunction dropDown() { // Handler for dropdown value change const valueMap = formatData(data); var dropdownChange = function(d) { d3.select("svg").remove(); const newData = data.filter(function(item) { return item.Value == d; }); // get the parent ul element, remove `active` class from children this.parentNode.childNodes.forEach( (e) => { e.classList.remove('active'); } ); // mark this node as active this.classList.add('active'); }; // Get names of Values, for dropdown var campaigns = Object.keys(valueMap).sort(); var dropdown = d3.select("#dropdown") .insert("ul", "svg") .classed('selector', true) dropdown.selectAll("li") .data(campaigns) .enter().append("li") .attr("id", (function(d) { return d[0].toUpperCase() + d.replace(/_/g, '').slice(1, d.length); })) .text(function(d) { return d[0].toUpperCase() + d.replace(/_/g, '').slice(1, d.length); }) .on("click", dropdownChange); var initialData = valueMap[campaigns[0]];}dropDown();/*css to go here*/body { font-family: 'Proxima-Nova', sans-serif; font-size: 12px;}.flex-container { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around;}.flex-item1 { width: 33%; height: auto; margin-top: 10px; font-weight: bold; text-align: center;}.flex-item2 { width: 67%; height: auto; margin-top: 10px; font-weight: bold; text-align: center;}.g-hed { text-align: left; text-transform: uppercase; font-weight: bold; font-size: 22px; margin: 3px 0;}.g-source-bold { text-align: left; font-size: 10px; font-weight: bold;}.g-source { margin: 10px 0;}.g-source-bold { text-align: left; font-size: 10px;}.g-intro { font-size: 16px; margin: 0px 0px 10px 0px;}.g-labels { font-family: 'Proxima-Nova', sans-serif; fill: white; font-weight: bold; font-size: 14px;}.g-chart { height: 100%;}.g-chart svg { width: 100%; height: 100%;}.axis line { fill: none; stroke: #ccc; stroke-dasharray: 2px 3px; shape-rendering: crispEdges; stroke-width: 1px;}.axis text { font-family: 'Proxima-Nova', sans-serif; font-size: 13px; pointer-events: none; fill: #7e7e7e;}.y.axis text { text-anchor: end !important; font-size: 14px; fill: #7e7e7e;}.domain { display: none;}.line { stroke: #2f5491; stroke-width: 3px; fill: none;}.overlay { fill: none; pointer-events: all;}.focus { font-size: 14px;}.focus circle { fill: #5e8dc9;}ul { padding: 0; list-style-type: none;}.selector li { padding: 20px 0 20px 0; border-top: 1px solid #ffffff; border-bottom: 3px solid #e0e0e0; background: #fff;}.active { color: #c7003b}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script><script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script><ul class="flex-container"><li class="flex-item1"><div id="dropdown"></div></li><li class="flex-item2"><h5 class="g-hed"></h5><p class="g-intro"></p><div class="g-chart"></div><div class="g-source"><span class="g-source-bold"></span><span class="g-source-reg"></span></div></li></ul>