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

Question

我刚开始学习 D3Js，我正在为一个基本概念而苦苦挣扎。

假设我有一个数组：

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)});

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

谢谢。

Answer 1

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

您正在使用 .data() 和 .enter() - 当您想为数据数组中的每个项目（基准）创建一个元素时使用它们 - 但您只有一个元素，该元素已经存在。因为我们不需要输入任何东西，而且我们只有一个数据，所以这两种方法不是您要找的。 此外，enter 通常跟在 .append() 之后，它创建输入的元素 - 否则您不会将监听器分配给任何可点击的元素。

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

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

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

How to display array element on click event with D3JS

javascript

addeventlistener

d3.js