D3 .classed（）使用多个选择器（版本4）

Question

使用D3的第4版并尝试选择第三项，删除项目类，并添加突出显示和更大的类。由于某种原因，项目类未被删除。和建议？

HTML代码

mysqli_fetch_assoc()

D3代码

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

Answer 1

编辑：对于v4。你可以编写一个函数，但这种方式更简单。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

原始答案：您的语法错误。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;