javascript - D3 .classed() Using multiple selectors (Version 4) -

using version 4 of d3 , trying select third item, remove item class, , add highlight , bigger classes. reason item class not being removed. , suggestions?

html code

  <div class="container">       <h2>d3 graphic</h2>       <section id="chart">            <div class="item">barot bellingham</div>            <div class="item">hassum harrod</div>            <div class="item">jennifer jerome</div>            <div class="item">richard tweet</div>            <div class="item">lorenzo garcia</div>            <div class="item">xhou ta</div>       </section>  </div> 

d3 code

d3.selectall('.item:nth-child(3)') .classed(     'highlight', true,     'item', false,     'bigger', true ); 

edit : v4. can write function but, simpler way.

d3.selectall('.item:nth-child(3)')      .classed('highlight bigger',true)      .classed('item',false);

 .highlight {      color : red;      }      .item {      font-weight : bold;      }      .bigger {      font-size : 24px;      }

<script src="https://d3js.org/d3.v4.min.js"></script>  <div class="container">            <h2>d3 graphic</h2>            <section id="chart">                 <div class="highlight">barot bellingham</div>                 <div class="item">hassum harrod</div>                 <div class="item">jennifer jerome</div>                 <div class="item">richard tweet</div>                 <div class="item">lorenzo garcia</div>                 <div class="bigger">xhou ta</div>            </section>       </div>

original answer : syntax wrong.

d3.selectall('.item:nth-child(3)')  .classed({      'highlight': true,      'item': false,      'bigger': true  });

.highlight {  color : red;  }  .item {  font-weight : bold;  }  .bigger {  font-size : 24px;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>  <div class="container">        <h2>d3 graphic</h2>        <section id="chart">             <div class="highlight">barot bellingham</div>             <div class="item">hassum harrod</div>             <div class="item">jennifer jerome</div>             <div class="item">richard tweet</div>             <div class="item">lorenzo garcia</div>             <div class="bigger">xhou ta</div>        </section>   </div>