Internet Explorer 11のD3.jsでの異常なマウスオーバー操作

Question

私はいくつかのsvgアニメーションを開発していますが、要素のz-インデックス（つまり要素内の要素の順序）を変更するにはマウスオーバー/マウス出力イベントを検出する必要があります。 私のコードはChromeとFirefoxで完全に機能しますが、IE11でいくつか問題があります。 特に、IE11はいくつかのマウスオーバーイベントを検出し、次のmouseoutイベントを検出していないようです。

あなたはこの問題を解決するためにどのように任意のアイデア

(function() { 
'use strict'; 

var data = d3.range(0, 40); // [0, 1, 2, 3, 4 etc] 
console.log('number of items in array: ' + data.length); 
var overcounter = 1; 
    var outcounter = 1; 

d3.selection.prototype.moveToFront = function() { 
    return this.each(function(){ 
d3.select("#log").append("div").text("Over counter " + overcounter++); 

this.parentNode.appendChild(this); 
    }); 
}; 
d3.selection.prototype.moveToBack = function() { 

    return this.each(function() { 

d3.select("#log").append("div").text("Out counter " + outcounter++); 

     var firstChild = this.parentNode.firstChild; 
     if (firstChild) { 
      this.parentNode.insertBefore(this, firstChild); 
     } 
    }); 
}; 

var colour = d3.scale.category10(); 

// vars 
var rectWidth = 100, 
    rectHeight = 300; 

var svg = d3.select('#container').append('svg'); 
// set width & height in css 

svg.selectAll('rect') 
    .data(data) 
    .enter() 
    .append('rect') 
     .attr({ 
      width: rectWidth, 
      height: rectHeight, 
      x: function(d,i) { 
       // overlap the rects intentionally 
       return (rectWidth-40)*i; 
      }, 
      y: 10 
     }) 
     .style({ 
      fill: function(d, i) { 
       return colour(i); 
      }, 
      stroke: 'none' 
     }) 
    .on('mouseover', function(d) { 
     d3.select(this).moveToFront(); 
    }) 
    .on('mouseout', function(d) { 

     d3.select(this).moveToBack(); 
    }) 
    })(); 

https://jsfiddle.net/erdmca23/4/における問題のダミー例を見つけることができますか？

おかげ

Answer 1

あなたがd3.selectionを使用しているときどうやら、それはマウスイベントを失います。このポストを参照してください - Move active element loses mouseout event in internet explorer

私はd3の要素を追加する方法を整理する必要がありました。