在IE10上D3.js brush.extent（）錯誤

我試圖在我的網站上使用修改的「Focus+Context via Brushing」圖表。一切工作正常Chrome/FF/Safari。但是，當我在IE10上嘗試時，brush.extent()向左移動。在IE10上D3.js brush.extent（）錯誤

在圖表中，當我點擊「四月」並拖動到「六月」時，結果的焦點區域是從「二月」的稍前一點到「四月」的稍前一點。

我相信它與html有關，但我不明白爲什麼會導致它。我知道，如果我刪除第一個<td>，那麼這個轉變要少得多（幾乎不存在）。但我需要那<td>其他的東西。

這裏是我的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>

我上的jsfiddle完整的例子：http://jsfiddle.net/scripterX/3Ufqk/2/

我的數據數組有3個值，因爲我會最終轉換這個圖形顯示與焦點，而不是面積3個圖現在是圖表。

來源

2014-02-06 Andy Le

你有沒有嘗試過只有SVG，沒有嵌入到表格中？你還可以澄清一下你的意思嗎？「brush.extent（）'被移到左邊」。矩形不匹配上下文圖上的光標，還是焦點圖不匹配上下文矩形？它可能只是光標的中心點（從操作系統的角度來看）與圖標的視覺中心不匹配... – AmeliaBR

我的意思是「brush.extent（）向左移動」是，當我點擊上下文並拖動來突出顯示突出顯示的區域（以及生成的突出顯示區域）的區域，並將其移至實際的鼠標點擊的左側。 –

看起來這是一個已知的IE相關問題，當用戶放大瀏覽器窗口時，鼠標座標不正確：https：//github.com/mbostock/d3/issues/668您可以嘗試由其他用戶創建的此修補程序：https： //github.com/mbostock/d3/pull/766 – AmeliaBR

此問題是由於瀏覽器在SVG座標系與屏幕之間進行不正確的轉換而造成的，因此用戶在瀏覽器中更改了縮放設置。它在這個D3 GitHub的問題描述：

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

它顯然是較舊的瀏覽器版本中的問題已經被修復。但與IE瀏覽器，我們不能指望用戶有最新的瀏覽器版本...

github上的用戶vogievetsky has proposed a workaround它測試的錯誤，並在必要時進行更正。雖然還沒有被整合到主D3，它可以作爲一個補丁 - 只要加入他的劇本到你的頁面加載後D3和使用任何鼠標功能之前的某個時候：

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

來源

2014-02-07 17:46:07 AmeliaBR

在IE10上D3.js brush.extent（）錯誤

回答

相關問題