使用 d3.selectAll() 按索引选择多个 dom 元素

Question

我遇到了一个问题，我尝试使用 d3.selectAll() select 特定的 DOM 元素。例如，假设我有以下数据集。

const dataset = [3, 7, 9, 5, 4]

现在，我想从这个数据集创建 SVG 圆圈

d3.selectAll("circle").data(dataset).join("circle").attr("r", 2).attr("cx", (d,i) => i * 10).attr("cy", 100)

假设我有一个带有事件监听器的按钮，它应该 select 运行dom 个这些圆圈并更改它们的填充值。我该如何实施？

const button = document.querySelector("button")
button.addEventListener("click", () => { 

// what should the code be here?

}

我尝试了 How to access the DOM element that correlates to a D3 SVG object? 的一些建议，但这些建议仅适用于单个 dom 元素。有没有办法通过索引 select 多个 DOM 元素？

Answer 1

不幸的是，您的问题标题与您的示例之间存在不一致：在标题和最后一段中，您询问如何通过索引 select 元素 ，而在示例中您询问 如何 select 随机数量的元素 。所以我只回答标题问题。

在 D3 selections 中，传递给大多数 selections 方法的第二个参数是索引。因此，假设您有所需的索引，例如...

[1, 4, 5, 7]

...您只需使用filter、each 或任何其他直接方法来更改您的元素。这是一个简单的例子，circles 是我的圆 selection，我根据索引数组更改它们的填充：

const circles = d3.select("svg")
  .selectAll(null)
  .data(d3.range(10))
  .enter()
  .append("circle")
  .attr("r", 10)
  .attr("cx", (_, i) => i * 25 + 10)
  .attr("cy", 40);

const indicesArray = [1, 4, 5, 7];

circles.filter((_, i) => indicesArray.includes(i))
  .style("fill", "tan");

<script src="https://d3js.org/d3.v7.min.js"></script>
<svg></svg>

使用 d3.selectAll() 按索引选择多个 dom 元素

Selecting multiple dom elements by index with d3.selectAll()

javascript

d3.js