2017-01-27 7 views
0

私はSVGパス要素を使用してゴースト問題の裸の骨の例を作成しました。それはIE 11でゴーストを引き起こしますが、chrome/firefoxではうまく動作します。残念ながら、私たちのクライアントはIEを使いたいです。d3ゴー​​ストズームパンie

ノードとパスをリンクするパン/ズーム/ドラッグD3グラフv4を設定しています。これはフルスクリーンで、ウィンドウのサイズが変更されるとサイズが変更されます。

例はここにある:

再描画メソッドを呼び出します
window.addEventListener("resize", function() { redraw(); simulation.alphaTarget(0.3).restart(); }); 

function redraw() { 

    // Extract the width and height that was computed by CSS. 
    width = chartDiv.clientWidth; 
    height = chartDiv.clientHeight; 

    // Use the extracted size to set the size of an SVG element. 
    svg.attr("width", width).attr("height", height); 

    // Resize the zoom panel 
    zoomRect.attr("width", width).attr("height", height); 

    if (true) { 
     // reset simulation centre 
     simulation.force("center", d3.forceCenter(width/2, height/2)); 
    } 
} 

への

https://jsfiddle.net/sotian/xynya8q9/embedded/result/

私はそれがによって引き起こされていると仮定しています問題を再現し、ウィンドウが最大化されていないことを確認してから、ウィンドウ、それはパスのゴーストを残します。私はこの例に含まれていない他のシナリオでもこの効果を得ています。

これをクリアするには、svg要素を強制的に再描画する方法はありますか?

私は何がうまくいかないのか理解できません。

おかげで、 ジョン

答えて

0

未定義の "マーカー・エンド" のリンクがアップIEをねじ込むされています。あなたのリンクの定義に

.attr("marker-end", function (d) { return "url(#" + d.label + ")"; }); 

:にこの行を削除し

fiddleを更新しました。

+0

ワウありがとうマーク完璧。 –