如何使用 D3JS 在单击事件上显示数组元素答案

【问题标题】：How to display array element on click event with D3JS如何使用 D3JS 在单击事件上显示数组元素
【发布时间】：2021-12-17 06:23:44
【问题描述】：

我刚开始学习 D3J，但我正在为一个基本的想法而苦苦挣扎。

假设我有一个数组：

let arr = [a, b, c, d];

而且，我在 HTML 中有一个按钮

<input type="button" id="btn" value="Click">

使用 d3js，我想打印出（例如，console.log）以按顺序一一打印数组中的元素。换句话说，第一次单击按钮打印“a”，第二次单击“b”，以此类推，然后在点击最后一个元素后再次从“a”开始。

以下是我的尝试，它不起作用。

d3.select("#btn").data(arr).enter().on("click", function(d) { return console.log(d)});

有人可以帮助我了解如何使其正常工作吗？

谢谢。

【问题讨论】：

标签： javascript d3.js addeventlistener

【解决方案1】：

如果我对您的理解正确，我们可以相当容易地做到这一点（无论有没有 D3）。当您询问 D3 时，我将展示一个解决方案。

您正在使用 .data() 和 .enter() - 当您想为数据数组中的每个项目（数据）创建一个元素时使用它们 - 但您只有一个元素，它已经存在。由于我们不需要输入任何内容并且我们只有一个数据，因此这两种方法不是您想要的。 此外，enter 通常后面跟着 .append()，它会创建输入的元素 - 否则您不会将 on 侦听器分配给任何可点击元素。

相反，我们可以将包含值数组的单个数据绑定到按钮：

 .datum(arr)

但是，我们可以通过为当前索引添加一个属性来创建比这更有用的数据，这样我们需要的一切都是自包含的：

.datum({i:0,arr:arr})

然后我们可以为访问数据的按钮分配一个单击侦听器，记录arr[i] 的值并递增i。下面我使用模数运算符来避免将 i 重置为 0：

let arr = ["a", "b", "c", "d"];

d3.select("input")
  .datum({i:0, arr:arr })
  .on("click", function(d) {
    console.log(d.arr[d.i++%d.arr.length])
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<input type="button" id="btn" value="Click">

【讨论】：