javascript - 仅选择 d3 中的子集

标签 javascript d3.js

是否可以在d3中只选择一个子集/子组?

现在我有

d3.selectAll(".row")

现在在我有单元格的行下方,我想从第 3 行中选择所有单元格,如图所示 subset example . 没有 get(3) 或 [3] 选项。

感谢您的帮助。


d3.selectAll(".row").selectAll(".cell")

给我所有的细胞

最佳答案

有很多方法可以做到这一点。我最喜欢的是使用 css :nth-child 选择器:

d3.select(".row:nth-child(3n)").selectAll(".cell");

还有一些:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <div class="row">
      <div class="cell">a</div>
      <div class="cell">b</div>
      <div class="cell">c</div>
    </div>
    <div class="row">
      <div class="cell">d</div>
      <div class="cell">e</div>
      <div class="cell">f</div>
    </div>
    <div class="row">
      <div class="cell">g</div>
      <div class="cell">h</div>
      <div class="cell">i</div>
    </div>
    <div class="row">
      <div class="cell">j</div>
      <div class="cell">k</div>
      <div class="cell">l</div>
    </div>
  </body>
  
  <script>
    
    var w1 = d3.select(document.querySelectorAll(".row")[2]).selectAll(".cell"),
        w2 = d3.selectAll(".row").filter((d,i) => i === 2).selectAll(".cell"),
        w3 = d3.select(d3.selectAll(".row").nodes()[2]).selectAll(".cell"),
        w4 = d3.select(".row:nth-child(3n)").selectAll(".cell");      
  
  </script>

</html>

关于javascript - 仅选择 d3 中的子集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43836262/

相关文章:

javascript - 使用数据 URI 快速更新图像会导致缓存、内存泄漏

d3.js - 用d3和Leaflet实现动画缩放

javascript - d3 zoom 和 brush 同时工作

javascript - D3.js - 一段时间后动画中断

jquery - D3JS 或 Jquery : convert JSON string to integer

javascript - 将 D3.js 与 javascript 对象而不是外部 JSON 文件一起使用

javascript - 如何在 Angular 2 中的多个模块中使用指令

javascript - 无法读取类中未定义的属性

javascript - jQuery 按名称对 <select> 项进行排序

javascript - 如果断言失败则继续执行脚本