title: d3/jQuery - On start select all, but when one is selected - deselect all except that one, but allow individual selection of each element again
body: <p>I'm struggling with my selector function. Namely, allowing users to move from everything selected with the .selected class applied to each arc - to decidedly clicking one and de-selecting all the other elements, whilst still allowing for users to select all the items again. Towards the end of my JS script, I have attempted to include some jQuery that would action that. But I am finding that it is not working, or for some reason d3 and jquery conflict and my code is not read.</p>
  <p>Would you please be able to help me figure out this control flow? Thank you.</p>
  <p>Steps:</p>
  <ol>
  <li>All elements are selected.</li>
  <li>Selected one.</li>
  <li>Remove class of selected of all elements except the selected element in step 2</li>
  <li>Allow for users to reselect the elements one at a time. So, from 3, to 1, to 2, to 3, and back to 2. Essentially a function that works solely on start-up only.</li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var w = 800;
  var h = 800;
  
  const svg = d3.select('#radial-chart')
  .append('svg')
  .attr('width', w)
  .attr('height', h);
  
      const arc = d3.arc()
  
  var arcData = [
      {domain: '1', innerRadius: 0, outerRadius: (h/1.75), startAngle: Math.PI * -20/180, endAngle: Math.PI * 20/180},
      {domain: '2', innerRadius: 0, outerRadius: (h/1.25), startAngle: Math.PI * 20/180, endAngle: Math.PI * 60/180},
      {domain: '3', innerRadius: 0, outerRadius: (h/1.15), startAngle: Math.PI * 60/180, endAngle: Math.PI * 100/180},
  ];
  // Order needs to be from JSON
  var colorScale = d3.scaleOrdinal()
  .domain(["1", "2", "3",])
  .range(["#E8A82B", "#000000", "#2B55E8"]);
  const slices = arcData.map(d =&gt; arc(d));
  
  const handleMouseOver = (d, i, n) =&gt; {
      svg.selectAll('path')
          .transition().duration(300)
          .style('opacity', 0.35);
  
      d3.select(n[i])
      .transition().duration(300)
          .style('opacity', 0.35)
  }
  
  const handleMouseOut = (d, i, n) =&gt; {
      svg.selectAll('path')
      .transition().duration(300)
          .style('opacity', 0.35)
          .style('stroke-width', 0)
  
  }
  
  svg.selectAll('path')
      .data(slices)
      .enter()
      .append('path')
      .attr('transform', 'translate(325,550)')
      .attr("d", d =&gt; d)
      .attr("id", (d, i) =&gt; "arc" + i)
      .style("fill", (d,i) =&gt; colorScale(i))
      .style("z-index", 100)
      .style("opacity", 0.5)
      .attr('class', 'selected')
      .on('mouseover', handleMouseOver)
      .on('mouseout', handleMouseOut)
      .on('click', function(d, i) {
          d3.select(this).classed("selected", d3.select(this).classed("selected") ? false : true)
          d3.select('image#arc' + i).classed("selected", d3.select(this).classed("selected") ? true: false)
  
  })
  
  
  
  
  $('path').on('click', function(){
      if($(('arc0')&amp;&amp;('arc1')&amp;&amp;('arc2')).hasClass('selected')){
        $('path').removeClass('selected')
      }})</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.selected {
      transition: opacity 0.0s linear;
      -webkit-transition:  opacity 0.0s linear;
      -moz-transition:  opacity 0.0s linear;
      opacity: 1!important
  }
  
  image#arc0, image#arc1, image#arc2{
      transition: opacity 0s linear;
      -webkit-transition:  opacity 0s linear;
      -moz-transition:  opacity 0s linear;
      opacity: 0.35
  }
  
  image#arc0:hover, image#arc1:hover, image#arc2:hover {
      transition: opacity 0.3s linear;
      -webkit-transition:  opacity 0.3s linear;
      -moz-transition:  opacity 0.3s linear;
      opacity: 1
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="radial-chart.js"&gt;&lt;/script&gt;
          &lt;div id="radial-chart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>