NVD3图表响应问题 [英] NVD3 Chart responsive issue
本文介绍了NVD3图表响应问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有第二页的代码,在这里我使用了与此处完全相同的图表.但是在该页面上它是响应式的,我试图弄清楚为什么图表在这里没有响应.
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屋!
查看全文