如何使用D3JS实现点击按钮按顺序循环输出数组元素

错误原因 #

你之前的写法误用了D3的enter选择器：enter选择器的作用是匹配「数据数量超过现有DOM数量」的部分，用来创建新的DOM元素。你只有1个按钮元素，绑定长度为4的数组时enter选择器是空集合，所以绑定的点击事件根本没有生效，也没法实现按顺序循环输出的逻辑。

正确实现代码 #

首先注意如果你的数组元素是字符串，需要给元素加引号，完整实现代码如下：

// 定义目标数组，若为字符串需加引号
let arr = ['a', 'b', 'c', 'd'];
// 定义计数器记录当前输出位置
let currentIndex = 0;
// 直接给按钮绑定点击事件即可，不需要使用data/enter流程
d3.select("#btn").on("click", () => {
  console.log(arr[currentIndex]);
  // 索引自增后对数组长度取模，遍历到末尾自动回到开头
  currentIndex = (currentIndex + 1) % arr.length;
});

逻辑说明 #

• 额外维护一个计数器变量，用来记录当前需要输出的数组元素下标
• 每次点击触发事件时，先输出当前下标对应的数组元素，再更新计数器
• 用取模运算%处理下标越界的情况，计数器超过数组最大下标时会自动回到0，实现循环输出的效果
• 因为你只有一个固定的按钮DOM元素，不需要动态生成DOM，所以不需要调用data、enter方法做数据绑定，直接绑定点击事件即可。

内容的提问来源于stack exchange，提问作者HJL