D3.js v4：在 ES6 箭头函数事件监听器中访问当前 DOM 元素

Question

在 D3.js v4 中，通过传统回调函数注册事件监听器时，this 引用当前 DOM 元素：

d3.select("div").on('mouseenter', function() {
  d3.select(this).text("Yay");
});

ES6 提供了箭头函数，恕我直言，这使得 D3.js 代码更具可读性，因为它们非常简洁。但是，传统的回调不能一味的用箭头函数代替：

d3.select("div").on('mouseenter', () => {
  d3.select(this); // undefined
});

文章“On D3 and Arrow Functions”很好地解释了为什么this没有按预期绑定。文章建议对需要访问当前 DOM 元素的代码使用传统的回调。

是否可以通过箭头函数访问当前的 DOM 元素？

Answer 1

在 D3 中有一种惯用的方法：只需使用不太知名的第三个​​参数：

selection.on("mouseenter", (d, i, nodes) => {
    d3.select(nodes[i]);
});

这也是：

selection.on("mouseenter", function() {
    d3.select(this);
});

我在这里写了一个例子：d3 v4 retrieve drag DOM target from drag callback when `this` is not available

这是一个演示：

d3.selectAll("circle").on("mouseover", (d, i, p) => {
        d3.select(p[i]).attr("fill", "maroon")
    })
    .on("mouseout", (d, i, p) => {
        d3.select(p[i]).attr("fill", "seagreen")
    });

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
	<circle cx="50" cy="50" r="20" fill="seagreen"></circle>
	<circle cx="125" cy="50" r="20" fill="seagreen"></circle>
	<circle cx="200" cy="50" r="20" fill="seagreen"></circle>
</svg>

实际上，如果您查看链接的文章的末尾，他给出了相同的解决方案。

您的proposed solution、d3.event.target 尽管为事件侦听器工作，但在某些情况下不起作用。例如：

d3.selectAll("circle").each(()=>d3.select(d3.event.target).attr("fill", "red"))

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
	<circle cx="50" cy="50" r="20" fill="seagreen"></circle>
	<circle cx="125" cy="50" r="20" fill="seagreen"></circle>
	<circle cx="200" cy="50" r="20" fill="seagreen"></circle>
</svg>

但同样的代码使用第三个参数起作用：

d3.selectAll("circle").each((d,i,p)=>d3.select(p[i]).attr("fill", "red"))

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
	<circle cx="50" cy="50" r="20" fill="seagreen"></circle>
	<circle cx="125" cy="50" r="20" fill="seagreen"></circle>
	<circle cx="200" cy="50" r="20" fill="seagreen"></circle>
</svg>

Answer 2

可以使用 ES6 箭头函数并通过 d3.event.target 访问当前 DOM 元素：

d3.select("div").on('mouseenter', () => {
  d3.select(d3.event.target).text("Yay, this works!");
});