NVD3 在加载时重绘图表 'show'

Question

我正在尝试在 load 或 show.. 上重新绘制 NVD3 图表，但它不起作用，因为我需要为我的页面制作图表 display:none; 但图表是在重新加载后 width;25px; 但我设置为 100% 的 window 宽度..

当我调整浏览器大小时一切正常，只是当我加载页面时它不会工作...我为此编写了这段代码：

 // SLIDEUP
  $('#slide').click(function(){
    $('#border2').slideToggle(500);
    $('#slide1').slideToggle(500);
  });

  $('#slide').click(function (e) {
    e.preventDefault()
    $('#slide1').tab('show')
    $('#chart1 svg').trigger('resize'); // Added this line to force NVD3 to redraw the chart
});

   /* CHART */
   #slide1 {display: none; position: relative; width: 100%; overflow: hidden; right: 25px;}
   #chart1 { width: 100%; height: 25em; }

<div id="slide1">
    <div class="col-xs-12" id="margin-chart">
        <svg id="chart1"></svg>
    </div>
</div>

Answer 1

已解决：

这不是一个非常清晰的版本，但效果很好，我希望我能帮助别人..

我刚刚通过 .animation 设置了高度 0，以便图表可以完全加载，然后通过 jQuery 我设置了 .animation 以进行高度扩展并且它完美地工作.. 这是 NVD3 或其他图表的代码（使用 NVD3 和 Rickshawn 图表测试）

  $('#slide').click(function(){
    $('#border2').slideToggle(500);
  });

  $("#slide").click(function(){
    if($('.slide1').hasClass('showtable')) {
        $('.slide1.showtable').animate({height:300},500).removeClass('showtable');
  } else { 
        $('.slide1').animate({height:0},500)
        $('.slide1').addClass('showtable');
      }
  });

   /* CHART */
   .slide1 { position: relative; width: 100%; right: 25px;}
   .slide1.showtable {height: 0;}
    #chart1 {height: 300px;}

<div class="slide1 showtable">
     <svg id="chart1"></svg>
</div>

NVD3 在加载时重绘图表 'show'

NVD3 redraw chart on load 'show'

javascript

jquery

css

d3.js

nvd3.js