D3 .classed() Verwenden mehrerer Selektoren (Version 4)

Question

Mit Version 4 von D3 und dem Versuch, das dritte Element auszuwählen, entfernen Sie die Elementklasse und fügen die Hervorhebungs- und größeren Klassen hinzu. Aus irgendeinem Grund wird die Objektklasse nicht entfernt. Und Vorschläge?

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 
); 

Answer 1

EDIT: für v4. Sie können eine Funktion schreiben, aber es ist einfacher so.

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>

Ursprüngliche Antwort: Ihre Syntax ist falsch.

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>