Pretty strange behavior in Internet Explorer 9, 10, 11. The red arc has dimensions 1000x smaller than the blue, but is scaled up 1k times, therefore is visually equivalent. The mouse events on the red arc get incorrectly triggered on the whole rectangular bounding box that encompasses the arc, while for the blue only over the fill area as expected. Malfunction found only on IE browsers.
Edge bug reported at: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9481381/
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js"></script> | |
| <script> | |
| var arcG = d3.select('body').append('svg') | |
| .attr('width', window.innerWidth) | |
| .attr('height', window.innerHeight) | |
| .append('g') | |
| .attr('transform', 'translate(' + (window.innerWidth/2) + ',' + (window.innerHeight/2) + ')'); | |
| arcG.append('path').style('fill', 'blue') | |
| .attr('d', d3.arc() | |
| .innerRadius(200) | |
| .outerRadius(170) | |
| .startAngle(0) | |
| .endAngle(Math.PI)() | |
| ); | |
| arcG.append('path').style('fill', 'red') | |
| .attr('d', d3.arc() | |
| .innerRadius(0.2) | |
| .outerRadius(0.17) | |
| .startAngle(Math.PI) | |
| .endAngle(Math.PI * 2)() | |
| ) | |
| .attr('transform', 'scale(1000)'); | |
| arcG.selectAll('path') | |
| .style('opacity', 0.3) | |
| .on('mouseenter', function() { d3.select(this).style('opacity', 1); }) | |
| .on('mouseleave', function() { d3.select(this).style('opacity', 0.4); }); | |
| </script> | |
| </body> |
