title: Change color of selected li option with D3/JavaScript
body: <p>I am creating a list of unique values (from a JSON query) using D3.js and I want to change the color of the text for the selected li. The function that does that is given underneath the snippet. My problem is that the color does not reset when I click on another value from the list.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//JSON Data
  const data = [
  {
      "date": "2008-11",
      "Value": "A",
      "num": 7.8
    },
    {
      "date": "2007-11",
      "Value": "B",
      "num": 7.8
    }
  ];
  
  //Parses date for correct time format
  var parseDate = d3.time.format("%Y-%m").parse;
  
  //Format data for the filter list (or dropdown) function
  function 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 function
  function 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;
     });
      
      //Changes text color for the selected li option
      d3.select(this).style("color", "#c7003b");
   
    };
  
    // 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();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*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;
   
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"&gt;&lt;/script&gt;
  
  
  &lt;ul class="flex-container"&gt;
    &lt;li class="flex-item1"&gt;
      &lt;div id="dropdown"&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="flex-item2"&gt;
  
      &lt;h5 class="g-hed"&gt;&lt;/h5&gt;
      &lt;p class="g-intro"&gt;&lt;/p&gt;
      &lt;div class="g-chart"&gt;&lt;/div&gt;
      &lt;div class="g-source"&gt;&lt;span class="g-source-bold"&gt;&lt;/span&gt;&lt;span class="g-source-reg"&gt;&lt;/span&gt;
      &lt;/div&gt;
  
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The function that has to change. I need to reset the CSS I guess on every click and change the color again for the selected li:</p>
  
  <pre><code>  var dropdownChange = function(d) {
  
      d3.select("svg").remove();
      const newData = data.filter(function(item){
              return item.Value == d;
      });
  
      //Changes text color for the selected li option
      d3.select(this).style("color", "#c7003b");
  
    };
  </code></pre>