javascript - D3 .classed() 使用多个选择器(版本 4)

Question

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

HTML代码

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

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

Answer 1

编辑:对于 v4。您可以编写一个函数，但是这样更简单。

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>

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

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>