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;">&nbsp;</tr>
             <tr style="width: 960px; height: 62px; display: table-row; vertical-align: inherit; border-color: inherit;">
                 <td style="width: 232px; vertical-align: top;">&nbsp;</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.

Answers


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:

https://github.com/mbostock/d3/issues/668

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:

https://github.com/vogievetsky/KoalasToTheMax/blob/master/d3.mouse.patch.js


Need Your Help

Debugging Best Practices for C++ STL/Boost with gdb

c++ stl boost gdb

Debugging with gdb, any c++ code that uses STL/boost is still a nightmare. Anyone who has used gdb with STL knows this. For example, see sample runs of some debugging sessions in code here.

Opencart Undefined index Errors in product

php opencart undefined-index

I am using OpenCart 1.4.9 and I have been dealing with Undefined index Errors in product.php recently, I suspect it happens every time the user is creating/input a new product on the dashboard.