先上效果图：
D3.js 的交互性能强大，可以帮助我们在数据可视化中实现各种交互效果。D3.js 提供了丰富的事件处理机制，可以方便地监听和处理各种用户交互事件。在本文中，我们将介绍 D3.js 的交互功能，并展示如何使用它们来创建交互式数据可视化。
原生事件监听器
首先，让我们回顾一下浏览器的原生事件监听器。浏览器具有本机事件侦听器，我们可以使用 addEventListener() 方法来监听用户事件，例如鼠标事件、键盘事件、触摸事件、滚动事件等。例如：
javascript
document.addEventListener('click', function() {
console.log('click');
});当用户在页面上的任何位置单击时，浏览器将触发 click 事件，并在控制台中输出 'click'。这些事件监听器具有许多功能，并且使用起来非常简单。
D3.js 的事件监听器
D3.js 提供了一个更强大的事件监听器，可以帮助我们在数据可视化中实现更多功能。我们可以使用 D3.js 的事件监听器包装器来创建事件监听器。D3.js 的选择对象具有 on() 方法，可以在选定的 DOM 元素上创建事件监听器。
例如，假设我们有一个 SVG 矩形元素的集合，我们想要在鼠标悬停在矩形上时改变其颜色，并在鼠标移出时恢复原始颜色。我们可以使用 D3.js 的事件监听器来实现这个交互效果。
首先，我们需要定义处理鼠标悬停事件和鼠标移出事件的函数：
javascript
let handleMouseover = function (d, i) {
d3.select(this)
.attr('fill', '#ff6633');
}
let handleMouseout = function (d, i) {
d3.select(this)
.attr('fill', d);
}然后，我们使用 on() 方法在矩形上创建鼠标悬停和鼠标移出的事件监听器：
javascript
rects
.on('mouseover', handleMouseover)
.on('mouseout', handleMouseout);这样，当鼠标悬停在矩形上时，会触发 mouseover 事件，并调用 handleMouseover 函数来改变矩形的颜色；当鼠标移出矩形时，会触发 mouseout 事件，并调用 handleMouseout 函数来恢复矩形的原始颜色。
更多交互效果
除了鼠标事件之外，D3.js 还提供了其他许多事件类型，可以用于实现更多交互效果。例如，键盘事件可以用于捕捉用户按键操作，触摸事件可以用于处理触摸屏设备上的手势操作，滚动事件可以用于响应用户滚动页面的行为等等。
使用 D3.js 的事件监听器，我们可以轻松地监听和处理这些事件，并实现各种交互效果。只需使用 on() 方法创建相应的事件监听器，并指定处理函数即可。
javascript
selection.on('keydown', handleKeydown);
selection.on('touchstart', handleTouchstart);
selection.on('scroll', handleScroll);在上面的示例中，keydown 事件会调用 handleKeydown 函数来处理键盘按键操作，touchstart 事件会调用 handleTouchstart 函数来处理触摸屏设备上的触摸事件，scroll 事件会调用 handleScroll 函数来响应页面滚动行为。
D3.js 的交互功能能够帮助我们实现各种交互式数据可视化效果。使用 D3.js 的事件监听器，我们可以轻松地监听和处理用户交互事件，例如鼠标事件、键盘事件、触摸事件、滚动事件等等。只需使用 on() 方法创建事件监听器，并指定处理函数即可。
在开发交互式数据可视化时，记得根据需求选择适当的事件类型，并编写相应的处理函数来实现所需的交互效果。
下面我们来实现效果图中的效果，绘制五个方块，填充不同的颜色，然后在方块上面绘制文字，当鼠标hover到方块的时候，方块变色，同时上面的文字渐渐显示出来。当鼠标移开，颜色恢复，同时文字渐渐消失。 我还创建了两个按钮，分别对应解除绑定和恢复绑定事件。 以下是源码：
javascript
let dom = document.createElement('div');
document.body.appendChild(dom);
let padding = 30;
let svgWidth = 600;
let svgHeight = 160;
let svg = d3.select(dom)
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight)
.style('border', '1px solid #999999')
// 定义5个颜色
let colors = ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6'];
// 绘制5个矩形
let rectWidth = 100;
let rectHeight = 100;
let rectPadding = 10;
let rects = svg.selectAll('rect')
.data(colors)
.enter()
.append('rect')
.attr('x', (d, i) => {
return padding + (rectWidth + rectPadding) * i;
})
.attr('y', (d, i) => {
return padding;
})
.attr('width', rectWidth)
.attr('height', rectHeight)
.attr('fill', (
d, i
) => {
return d;
})
const infos = ['J', 'Y', 'M', 'V me', '50'];
const texts = svg.selectAll('text')
.data(infos)
.enter()
.append('text')
.attr('x', (d, i) => {
return padding + (rectWidth + rectPadding) * i + rectWidth / 2;
})
.attr('y', (d, i) => {
return padding + rectHeight / 2;
})
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.attr('fill', '#ffffff')
.attr('font-size', '24px')
.attr('opacity', 0)
.text(d => {
return d;
})
.style('pointer-events', 'none');
// dispatch 调度
let dispatch = d3.dispatch("mouseover", "mouseout");
let handleMouseover = function (d, i) {
d3.select(this)
.attr('fill', '#ff6633')
// 第i个矩形的文字显示
d3.select(texts.nodes()[i])
.transition()
.duration(750)
.attr('opacity', 1)
}
let handleMouseout = function (d, i) {
d3.select(this)
.attr('fill', d);
// 第i个矩形的文字隐藏
d3.select(texts.nodes()[i])
.transition()
.duration(750)
.attr('opacity', 0)
}
dispatch.on('mouseover', handleMouseover);
dispatch.on('mouseout', handleMouseout);
rects
.on('mouseover', function (d, i) {
dispatch.call('mouseover', this, d, i);
})
.on('mouseout', function (d, i) {
dispatch.call('mouseout', this, d, i);
});
let butdiv = document.createElement('div');
dom.appendChild(butdiv);
let but1 = document.createElement('button');
but1.innerHTML = '解除绑定';
butdiv.appendChild(but1);
but1.onclick = function () {
dispatch.on('mouseover', null);
dispatch.on('mouseout', null);
}
let but2 = document.createElement('button');
but2.innerHTML = '重新绑定';
butdiv.appendChild(but2);
but2.onclick = () => {
dispatch.on('mouseover', handleMouseover);
dispatch.on('mouseout', handleMouseout);
}注意代码中的d3.select(this)的地方不能使用箭头函数。因为作用域的问题，用了箭头函数，this的指向就发生了变化。
在案例中我使用的d3-dispatch，我们就顺便讲解一下吧。
d3-dispatch D3.js 中的事件分发器
D3.js 是一个功能强大的 JavaScript 数据可视化库，它为开发人员提供了丰富的工具和组件来创建交互式和动态的数据可视化。在 D3.js 中，d3-dispatch 是一个用于管理和分发事件的模块。让我们一起来了解一下 d3-dispatch 的基本用法和作用。
什么是 d3-dispatch？
d3-dispatch 是 D3.js 中的一个模块，它提供了一个事件分发器的实现。事件分发器是一个中心化的机制，用于管理和触发不同的事件。它允许开发人员定义自定义事件，并在需要的时候触发这些事件。d3-dispatch 提供了一种方便的方式来处理和组织大量的事件，使得代码更加模块化和可维护。
d3-dispatch 在 D3.js 中的作用是提供了一种方便和结构化的方式来管理和触发事件。它可以帮助你更好地组织和处理复杂的交互行为，提高代码的可读性和可维护性。
具体来说，d3-dispatch 的作用体现在以下几个方面：
-
事件管理：d3-dispatch 允许你定义和管理多个事件。通过创建事件分发器实例并为每个事件添加监听器，你可以轻松地组织和维护这些事件。这样，你可以将不同的交互行为分解为独立的事件，使代码更加模块化和可扩展。
-
事件触发 ：使用 d3-dispatch，你可以通过调用事件分发器的
call方法来触发特定的事件。这样，你可以在代码中的适当位置触发事件，以响应用户的操作或其他触发条件。通过事件的触发，你可以执行相应的操作或更新数据，实现交互式的数据可视化效果。 -
事件监听 ：通过调用事件分发器的
on方法，你可以为每个事件添加监听器函数。这些监听器函数会在相应的事件被触发时执行。通过监听器函数，你可以定义事件触发后的具体行为，例如更新可视化图表、执行动画效果或与后端进行交互等。监听器函数的参数通常包含触发事件时相关的数据，以便你可以根据需要进行处理。
d3-dispatch 提供了一种结构化的方式来管理和处理事件，使得代码更加模块化、可读性更强，并且可以更好地处理复杂的交互行为。它是 D3.js 中非常有用的一个模块，尤其适用于构建交互式和动态的数据可视化。
如何使用 d3-dispatch？
要使用 d3-dispatch，首先需要引入 D3.js 库和 d3-dispatch 模块。然后，可以创建一个事件分发器实例，如下所示：
javascript
const dispatch = d3.dispatch("click", "hover", "update");在上面的示例中，我们创建了一个事件分发器实例 dispatch，并定义了三个事件：click、hover、update。
接下来，可以通过调用分发器实例的 on 方法来为每个事件添加监听器。例如，我们可以为 click 事件添加一个监听器，如下所示：
javascript
dispatch.on("click", function(d) {
console.log("Click event triggered with data", d);
});在上面的示例中，我们定义了一个监听器函数，当 click 事件被触发时，会在控制台中打印出事件的数据。
最后，可以通过调用分发器实例的 call 方法来触发特定的事件。例如，我们可以手动触发 click 事件，并传递一些数据，如下所示：
javascript
dispatch.call("click", null, "Hello, D3.js");在上面的示例中，我们调用了 call 方法来触发 click 事件，并传递了一个字符串数据。
d3-dispatch 的作用
d3-dispatch 在 D3.js 中的作用非常重要。它提供了一种结构化的方式来管理和处理事件，使得代码更加模块化和可扩展。使用 d3-dispatch，我们可以更好地组织和管理复杂的交互行为，提高代码的可读性和可维护性。