jointjs - display:none での JointJS スケーリングの問題

Question

ブートストラップ カルーセル内にjointjsダイアグラムを埋め込もうとしていて、問題が発生しています。ダイアグラムが最初の/アクティブなペインにある場合はすべて正常に機能しますが、それが他のペインの場合、要素とリンクは奇妙な方法でスケーリングされ、リンクは要素の間違った側に接続されます。これを、display:none に設定された div にレンダリングされる svg のプロパティに絞り込みました。jointjs チュートリアル コードといくつかの簡単な css を使用して問題を再現する JSFiddle を以下に示します。

http://jsfiddle.net/L2wev6xc/4/

HTML

<button id="showsvg" type="button">Show Diagram</button>
<div id="myholder" class="hidden"></div>

CSS

#myholder {
  width:600px;
  height:300px;
  border: 1px solid black;
}
.hidden {
  /* comment out the line below and run again to see the different scaling and links */
  display: none;
}

JS

// cut paste entire jointjs tutorial here

$("#showsvg").click(function () {
  $("#myholder").removeClass("hidden");
});

これは、可視性プロパティを使用すると発生せず、表示のみです。また、上記の jsfiddle のダイアグラムでは、スケーリングがわずかにずれていますが、はるかに大きく複雑なダイアグラムでは、状況が劇的に悪化します。