Using version 4 of D3 and trying to select the third item, remove the item class, and add the highlight and bigger classes. For some reason the item class is not being removed. And 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
);

Using version 4 of D3 and trying to select the third item, remove the item class, and add the highlight and bigger classes. For some reason the item class is not being removed. And 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
);

• javascript
• d3.js

Share Improve this question Follow asked Jul 21, 2016 at 16:46 Dani MossDani Moss 7322 gold badges22 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

EDIT : for v4. You can write a function but, it is simpler this 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/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 : Your syntax is 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./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>