1

次の例を考えてみましょう: http://jsfiddle.net/emepyc/gVNRc/

 <body>
  <ul class="nav nav-tabs">
    <li><a href="#plot" data-toggle="tab">Main</a></li>
  </ul>

  <div class="tab-content">
    <div id="plot" class="tab-pane">
    </div>
  </div>
 </body>

"plot" div 要素がブートストラップ コントロール下にある場合、bbox は誤って次のように報告されます: SVGRect {height: 0, width: 0, y: 0, x: 0}

しかし、div要素を外側に移動すると...

 <body>
    <div id="plot">
    </div>
 </body>

... bbox は次のように正しく報告されます: SVGRect {height: 146, width: 848, y: 180, x: 56}

ここで何が起こっているか知っている人はいますか？

M;

4

1 に答える 1

1

わかりました、この会話は別の場所で行われているようです... https://groups.google.com/forum/?fromgroups=#!topic/d3-js/dW_pt5vs7kE

tab-pane実際、タブ ペインが最初のタブ ペインである場合、div内で初期化された場合に svg がどのように正しく表示されるかについては既に説明しましたactive。

http://jsfiddle.net/SzVrs/8/

  <ul class="nav nav-tabs">
    <li class="active"><a href="#plot" data-toggle="tab">Main</a></li>
    <li><a href="#plotThickens" data-toggle="tab">Other</a></li>
  </ul>
  <div class="tab-content">
    <div id="plot" class="tab-pane active"></div>
    <div id="plotThickens" class="tab-pane">
        <div class="alert">
          <p>The plot thickens!</p>
      </div>
    </div>
  </div>

activeしかし、svg 要素が最初のタブ内にない場合はどうすればよいでしょうか?

ここに 1 つのアプローチがあります: svg 要素を削除し、ブートストラップ ナビゲーションの href をクリックしたときに再構築します。

http://jsfiddle.net/3LhtX/10/

 $('a[data-toggle="tab"]').on('shown', function (e) {
   $('svg').remove();
   var svg = plot();
   BB(svg);
 });
于 2013-01-09T01:15:36.367 に答える