d3.js防止覆盖事件

Question

我想在d3中编写可重用的图表。到目前为止，这非常有效 - 我已经在jquery插件中“封装”了d3逻辑。但是，我遇到了d3事件的问题。我想在每个矩形的条形图中附加鼠标悬停事件。我的问题：事件将被覆盖 -

示例：如果我想在页面上显示两个不同的条形图，则调用插件：

 $("#firstChart").D3Chart(d3FirstOptions);
 $("#secondChart").D3Chart(d3SecondOptions);

插件-段：

(function ($) {
    $.fn.D3Chart = function (extOpt) {
       //...
    function drawBars() {
      //...
      rect.on("mouseover", function (d) {
             var dpChannel = d3.select(this.parentNode).datum();
              //...
              });
       }
      //...
    })(jQuery);

第二张图表中的鼠标悬停事件会覆盖第一张图表1：1中的事件。 我怎么能阻止这个？我在事件处理程序中尝试了不同的命名空间：

.on("mouseover.firstchart", ...)
.on("mouseover.secondchart", ...)

但这没有帮助。

我该如何解决这个问题？谢谢你！