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元素在bootstrap控件下时，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}

有人知道这里发生了什么吗？

米；

4

1 回答 1

1

好的，所以看起来这个对话已经在其他地方进行了...... https://groups.google.com/forum/?fromgroups=#!topic/d3-js/dW_pt5vs7kE

事实上，已经提到tab-pane如果选项卡窗格是第一个active选项卡窗格，如果在 div 中初始化 svg 将如何正确显示。

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>

但是如果 svg 元素不在第一个active选项卡内怎么办？

这是一种方法：删除 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 回答