Javascript NVD3图表响应问题 NVD3响应问题

Javascript NVD3图表响应问题 NVD3响应问题,javascript,d3.js,charts,nvd3.js,Javascript,D3.js,Charts,Nvd3.js,我有第二页的代码,在那里我使用了与这里完全相同的图表。但在这一页上,它是有响应的,我试图找出为什么图表在这里没有响应 var colors=[“rgba(74210255.8)”,“rgba(8517238.8)”,“rgba(205,32,31.8)”; d3.scale.colors=函数(){ 返回d3.scale.ordinal()范围(颜色); }; var colors=d3.scale.colors(); /*var colors=d3.scale.category20();*

我有第二页的代码,在那里我使用了与这里完全相同的图表。但在这一页上,它是有响应的,我试图找出为什么图表在这里没有响应

var colors=[“rgba(74210255.8)”,“rgba(8517238.8)”,“rgba(205,32,31.8)”;
d3.scale.colors=函数(){
返回d3.scale.ordinal()范围(颜色);
};
var colors=d3.scale.colors();
/*var colors=d3.scale.category20();*/
var keyColor=函数(d,i){返回颜色(d.key)};
var图;
nv.addGraph(函数(){
chart=nv.models.stackedAreaChart()
.useInteractiveGuideline(真)
.x(函数(d){返回d[0]})
.y(函数(d){返回d[1]})
.showControls(错误)
.showYAxis(真)
.showLegend(假)
.rightAlignYAxis(真)
.ControlLabel({stacked:“stacked”})
.颜色(keyColor)
.期限(500);
chart.xAxis.tickFormat(函数(d){返回d3.time.format('%a')(新日期(d))});
chart.yAxis.tickFormat(d3.format('f'));
图表、图例、页边距({
排名:30
});
d3.选择(“#图表1”)
.数据(histcatexplong)
.transition().持续时间(1000)
.电话(图表)
.each('start',function()){
setTimeout(函数(){
d3.选择全部(“#图表1*”)。每个(函数(){
如果(此.__;转换)
此.__;转换__;持续时间=1;
})
}, 0)
});
nv.utils.windowResize(图表更新);
收益表;
});

当slideToggle函数完成时,您需要调用
chart.update()
,以使nvd3将图表重新绘制为新的维度

即:


我使用了
.animate
功能

$(“#幻灯片”)。单击(函数(){
if($('.slide1').hasClass('showtable')){
$('.slide1.showtable')。动画({height:300},500)。removeClass('showtable');
}否则{
$('.slide1')。设置动画({height:0},500)
$('.slide1').addClass('showtable');
}
});
.slide1{
位置:相对位置;
宽度:100%;
溢出:隐藏;
右:25px;
}
.slide1.showtable{
身高:0;
}

这不是问题所在,但最好使用CSS文件设置样式,并在缩放到查看窗口时使用em破折号而不是像素来调整大小:
#chart1{width:100%;height:30em;}
您还可以尝试使用inspect元素查看图表本身的边距和填充值,并使用CSS手动调整。我已经检查了元素,所有内容都显示得很好。。Windows是100%,svg也是。。但是这是图表中的一个问题但是谢谢我们的建议我要试试它我试过了但它也有同样的问题。。所有东西都显示了它的响应设置为100%的窗口大小,但我看到设置为15px,但我无法更改。。但是当我像
#chart1{width:25em;height:25em;}
那样设置时,它可以工作,但是当我想将它设置为响应时,它就不能工作了。如果你可以手动更改图表的宽度,那么就利用媒体查询来设置大小限制。本教程应有助于:
$('#chart').slideToggle(function() {
    chart.update();
});