NVD3图表响应问题 [英] NVD3 Chart responsive issue

问题描述

我有第二页的代码，在这里我使用了与此处完全相同的图表.但是在该页面上它是响应式的，我试图弄清楚为什么图表在这里没有响应.

I have code from my second page where I used the exactly same chart like here. But on that page it is responsive and I am trying to figure out why the chart is not responsive here.

  var colors = ["rgba(74, 210, 255, .8)", "rgba(85, 172, 238, .8)", "rgba(205, 32, 31, .8)"];
  d3.scale.colors = function() {
        return d3.scale.ordinal().range(colors);
    };
  
  var colors = d3.scale.colors();
    /*var colors = d3.scale.category20();*/ 
    var keyColor = function(d, i) {return colors(d.key)};  
  
    var chart;
    nv.addGraph(function() {
        chart = nv.models.stackedAreaChart()
            .useInteractiveGuideline(true)
            .x(function(d) { return d[0] })
            .y(function(d) { return d[1] })
            .showControls(false)
            .showYAxis(true)
            .showLegend(false)
            .rightAlignYAxis(true)
            .controlLabels({stacked: "Stacked"})
            .color(keyColor)
            .duration(500);

        chart.xAxis.tickFormat(function(d) { return d3.time.format('%a')(new Date(d)) });
        chart.yAxis.tickFormat(d3.format('f'));

        chart.legend.margin({
                        top: 30
                    });

        d3.select('#chart1')
            .datum(histcatexplong)
            .transition().duration(1000)
            .call(chart)
            .each('start', function() {
                setTimeout(function() {
                    d3.selectAll('#chart1 *').each(function() {
                        if(this.__transition__)
                            this.__transition__.duration = 1;
                    })
                }, 0)
            });

        nv.utils.windowResize(chart.update);
        return chart;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div class="slide1">
   <div class="col-xs-12" id="margin-chart">
      <svg id="chart1" style="width: 100%; height: 300px;"></svg>
   </div>
</div>

推荐答案

当slideToggle函数完成后，您需要调用chart.update()，以使nvd3将图表重绘到新尺寸.

You need to call chart.update() when your slideToggle function finishes to make nvd3 redraw the chart to the new dimensions.

即:

$('#chart').slideToggle(function() {
    chart.update();
});

这篇关于NVD3图表响应问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！