D3.js中针对单个元素的selection.each()等效替代方案

嘿，这个场景我之前开发时也遇到过！针对单个元素要执行自定义逻辑，又不想绑定具体事件的话，有两个非常合适的方法可以替代你代码里的???，完全贴合你的需求：

方法一：直接使用 .each() #

虽然你用d3.select()选的是单个元素，但D3返回的依然是一个长度为1的选择集，所以你原来处理集合时用的.each()方法完全适用，而且会立即执行你的回调逻辑，不需要绑定任何事件。

注意：别用箭头函数，不然this会指向全局对象，拿不到目标DOM元素！

示例代码：

d3.select("#mySingleElement")
  .each(function() {
    const curr_data = something[0];
    calling_my_custom_function(this, curr_data);
  });

方法二：使用 .call()（更适合选择集级别的操作） #

如果你想更直接地基于D3选择集来操作，.call()是更好的选择。它会把当前的选择集作为第一个参数传给回调函数，你可以在回调里拿到选择集后执行自定义逻辑：

场景1：自定义函数接收D3选择集 #

如果你的自定义函数可以调整为接收选择集作为参数：

// 调整自定义函数，适配D3选择集
function calling_my_custom_function(selection, data) {
  // 这里可以直接用selection操作元素，比如selection.style("fill", "red")
}

// 调用方式
d3.select("#mySingleElement")
  .call(function(selection) {
    const curr_data = something[0];
    calling_my_custom_function(selection, curr_data);
  });

场景2：保留原自定义函数的参数格式 #

如果不想修改自定义函数，也可以通过selection.node()拿到原生DOM元素：

d3.select("#mySingleElement")
  .call(function(selection) {
    const curr_data = something[0];
    calling_my_custom_function(selection.node(), curr_data);
  });

这两个方法都是立即执行逻辑，不需要依赖任何用户事件（比如click、mouseover），完美匹配你不想绑定具体事件的要求。其中.each()更贴近你原来处理集合的写法，上手成本更低~

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