D3.js brush.extent() wrong on IE10
I'm trying to use a modified "Focus+Context via Brushing" graph on my site. Everything works fine on Chrome/FF/Safari. However, when I tried it on IE10, the brush.extent() is shifted to the left.
What happens is that in the graph, when I click on 'April' and dragged to 'June', the resulting focus area is from slightly before 'February' to slightly before 'April'.
I believe it has something to do with the html, though I can't figure why that would cause it. I do know that if I remove the 1st <td>, then the shift is much less (nearly non existent). But I need that <td> for something else.
Here's my HTML:
<div style="zoom:1; width:960px; display: block;"> <table style="margin: 10px 0; max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; display: table; zoom: 1;"> <tbody style="display: table-row-group; vertical-align: middle; border-color: inherit; border-collapse: collapse; border-spacing: 2px; border-color: gray; zoom: 1;"> <tr style="width: 960px; height: 62px; display: table-row; vertical-align: inherit; border-color: inherit;"> </tr> <tr style="width: 960px; height: 62px; display: table-row; vertical-align: inherit; border-color: inherit;"> <td style="width: 232px; vertical-align: top;"> </td> <td style="text-align: center; vertical-align: top; display: table-cell;"> <div style="display: block; width: 665px; text-align: center;"> <div class='graph_container_div' is-loaded='false'> <div id='line_chart' class='compartment_half' style='height:375px'></div> </div> </div> </td> </tr> </tbody> </table> </div>
my full example on jsfiddle: http://jsfiddle.net/scripterX/3Ufqk/2/
My data array has 3 values because I will ultimately convert this graph to show 3 line graphs with focus instead of the area graph that it is now.
The problem is caused by browsers giving an incorrect conversion between the SVG coordinate system and the screen when the user has changed the zoom setting in the browser. It is described in this d3 github issue:
It apparently was a problem in older Chrome versions that has since been fixed. But with IE we can't count on users having the latest browser versions...
User vogievetsky on github has proposed a workaround which tests for the bug and makes corrections if necessary. Although it hasn't been integrated into the main d3, it is available as a patch -- just add his script to your page sometime after loading d3 and before using any mouse functions: