鼠标悬停事件不适用于条形图；但是在html中有一个事件

Question

我有一个条形图，我想在d3中提供交互性。特别是，我希望条形图最终悬停在其上方时突出显示。这是d3 v3的版本。

我正在尝试扩大此条形图：http://bl.ocks.org/cse4qf/95c335c73af588ce48646ac5125416c6

现在，当我将鼠标悬停在条形图上时，我希望控制台记录打印语句。但是，我什至无法使它正常工作。我在初始化条时使用了.on方法。

var margin =  {top: 20, right: 10, bottom: 20, left: 40};
var marginOverview = {top: 30, right: 10, bottom: 20, left: 40};
var selectorHeight = 40;
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom - selectorHeight;
var heightOverview = 80 - marginOverview.top - marginOverview.bottom;

var maxLength = d3.max(countJson.map(function(d){ return d.class.length})) // max length of class label 

var barWidth = maxLength * 3;
var numBars = Math.round(width/barWidth);
var isScrollDisplayed = barWidth * countJson.length > width;




var xscale = d3.scale.ordinal()
                .domain(countJson.slice(0,numBars).map(function (d) { return d.class; }))
                .rangeBands([0, width], .2);

var yscale = d3.scale.linear()
                            .domain([0, d3.max(countJson, function (d) { return d.count; })])
              .range([height, 0]);

var xAxis  = d3.svg.axis().scale(xscale).orient("bottom");
var yAxis  = d3.svg.axis().scale(yscale).orient("left");

var svg = d3.select("body").append("svg")
                        .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom + selectorHeight);

var diagram = svg.append("g")
                                 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

diagram.append("g")
         .attr("class", "x axis")
       .attr("transform", "translate(0, " + height + ")")
       .call(xAxis);

diagram.append("g")
       .attr("class", "y axis")
       .call(yAxis);

var bars = diagram.append("svg");

bars.selectAll("rect")
            .data(countJson.slice(0, numBars), function (d) {return d.class; })
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function (d) { return xscale(d.class); })
            .attr("y", function (d) { return yscale(d.count); })
            .attr("width", xscale.rangeBand())
            .attr("height", function (d) { return height - yscale(d.count); })
            .on("mouseover",function(){console.log("hi");}) // first console log
            ;



if (isScrollDisplayed)
{
  var xOverview = d3.scale.ordinal()
                  .domain(countJson.map(function (d) { return d.class; }))
                  .rangeBands([0, width], .2);
  yOverview = d3.scale.linear().range([heightOverview, 0]);
  yOverview.domain(yscale.domain());

  var subBars = diagram.selectAll('.subBar')
      .data(countJson)

  subBars.enter().append("rect")
      .classed('subBar', true)
      .attr({
          height: function(d) {
              return heightOverview - yOverview(d.count);
          },
          width: function(d) {
              return xOverview.rangeBand()
          },
          x: function(d) {

              return xOverview(d.class);
          },
          y: function(d) {
              return height + heightOverview + yOverview(d.count)
          }
      });

  var displayed = d3.scale.quantize()
              .domain([0, width])
              .range(d3.range(countJson.length));

  diagram.append("rect") // allows for dragging the bar below to get extra bars
              .attr("transform", "translate(0, " + (height + margin.bottom) + ")")
              .attr("class", "mover")
              .attr("x", 0)
              .attr("y", 0)
              .attr("height", selectorHeight)
              .attr("width", Math.round(parseFloat(numBars * width)/countJson.length))
              .attr("pointer-events", "all")
              .attr("cursor", "ew-resize")
              .call(d3.behavior.drag().on("drag", display))
              ;
}

function display () { // updates the bars on screen
    var x = parseInt(d3.select(this).attr("x")),
        nx = x + d3.event.dx,
        w = parseInt(d3.select(this).attr("width")),
        f, nf, new_data, rects;

    if ( nx < 0 || nx + w > width ) return;

    d3.select(this).attr("x", nx);

    f = displayed(x);
    nf = displayed(nx);

    if ( f === nf ) return;

    new_data = countJson.slice(nf, nf + numBars);

    xscale.domain(new_data.map(function (d) { return d.class; }));
    diagram.select(".x.axis").call(xAxis);

    rects = bars.selectAll("rect")
      .data(new_data, function (d) {return d.class; })
      .on("mouseover",function(){console.log("hi");})
      ;

        rects.attr("x", function (d) { return xscale(d.class); })
        ;


    rects.enter().append("rect")
      .attr("class", "bar")
      .attr("x", function (d) { return xscale(d.class); })
      .attr("y", function (d) { return yscale(d.count); })
      .attr("width", xscale.rangeBand())
      .attr("height", function (d) { return height - yscale(d.count); })
      ;

    rects.exit().remove();
};

预期结果是图形将向控制台输出“ hi”。但是我什至不能使它工作。我试图在多个地方进行鼠标悬停事件。

编辑，我可以让它在chrome中工作，但不能在Firefox中工作。