在 update() 转换期间绑定事件答案

【问题标题】：Binding an event during an update() transition在 update() 转换期间绑定事件
【发布时间】：2015-03-18 00:58:08
【问题描述】：

是否可以在转换期间将事件绑定到选择？

例如，假设这是您的更新：

        g3.selectAll(".circles")
          .data(dataFiltered, function(d){ return d['token']})
          .transition().delay(circleDelay).duration(1200)
              .attr('r', pointRadius + "px")
              .attr('stroke', '#fff')
              .attr('stroke-width', 1.5)
              .attr("fill",function(d,i){ return (typeof(d[3]) === 'string') ? colorize(d[3]) : null })
              .style('cursor',"pointer")
              .attr('class',"circles");

链接.on('mouseover',function mouseoverlogic(){});会引发错误

在enter().update().exit() 模式期间，可以将事件绑定到exit() 之前的现有选择吗？

【问题讨论】：

如果您将.on(...) 放在.transition() 之后，您会将处理程序绑定到转换而不是选择。但是，是的，一般来说，您当然可以将事件处理程序绑定到选择。

标签： d3.js

【解决方案1】：

由于转场是一种特殊的选择，因此您不能使用所有可用于转场选择的方法。相反，请使用 transition.each() 将您的处理程序绑定到转换中的元素。

.transition()
    .each(function () {
        d3.select(this).on('mouseover', function mouseoverlogic() {});
    });

【讨论】：