nvd3 图表开始在浏览器中被压扁
nvd3 chart starts out squished in browser
我已经在互联网上搜索了这个问题的解决方案,但还没有找到。我希望这里有人有这方面的经验,可以帮助我指明正确的方向。
我有一个使用 Angular-nvd3 创建的折线图,我使用 Bootstrap 来提高响应能力。基本上我每行有两个图表。我 运行 遇到的问题是,当我第一次加载页面时,图表被压缩成很小的宽度。我没有在图表上设置宽度,以便它可以继承 100% 宽度并填充容器。只要我对浏览器做任何事情,例如打开控制台或调整浏览器大小,图表就会缩放到正确的宽度。我想知道是否有任何方法可以强制调整大小。我在使用 c3d3 之前遇到过类似的问题,但使用 chart.resize() 解决了这个问题。我不知道 nvd3 是否有类似的方法,因为我对 nvd3 的经验不多。我想知道是否有类似的方法可以使用,或者是否有 d3 的纯粹方法来做到这一点。
这里有一些之前和之后的图片来帮助形象化这个问题:
之前:
打开控制台或以任何方式调整浏览器大小后,它会正确缩放:
编辑:我应该补充一点,设置固定宽度可以绕过这个问题,但随后固有的响应能力就会消失(当图形在较小的浏览器尺寸下重叠时会出现新问题)
编辑:添加了一些我希望能有所帮助的代码片段。我以 Bootstrap 的方式使用行和列。我还在 JS
中声明图表选项
HTML
<div class="row">
<div class="col-sm-6">
<nvd3 id="inlet" options="inletOptions" data="inletData"></nvd3>
</div>
<div class="col-sm-6">
<nvd3 id="outlet" options="outletOptions" data="outletData"></nvd3>
</div>
</div>
JS
$scope.inletOptions = {
chart: {
type: 'lineChart',
height: 300,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d) { return d.x; },
y: function(d) { return d.y; }
}
};
对于那些运行有类似问题的人,请参阅以下帖子:
https://github.com/krispo/angular-nvd3/issues/259
http://plnkr.co/edit/ncT72d?p=preview
$scope.triggerResizeEvent = function() {
window.dispatchEvent(new Event('resize'));
}
如果有人 运行 遇到这个问题,对我来说这实际上是一个非常简单的解决方案 没有 调整大小事件。
这是我的图表。
<div id="chart" class="row">
<div class="col-xs-12">
<svg>
</svg>
</div>
</div>
如果我没有要显示的数据,我只需使用 JavaScript:
隐藏 div
function ShowChart(show) {
$('#chart').css("display", (show ? "block" : "none"));
}
但是当我将 "true" 传递给函数时它被压扁了。
我的解决方案是,我必须先显示 div,然后使用 .update() 作为图形。
所以,对我来说,这没有工作:
d3.select("#chart svg").datum(chart_data);
chart.update();
ShowChart(true);
这做到了:
ShowChart(true);
d3.select("#chart svg").datum(chart_data);
chart.update()
我已经在互联网上搜索了这个问题的解决方案,但还没有找到。我希望这里有人有这方面的经验,可以帮助我指明正确的方向。
我有一个使用 Angular-nvd3 创建的折线图,我使用 Bootstrap 来提高响应能力。基本上我每行有两个图表。我 运行 遇到的问题是,当我第一次加载页面时,图表被压缩成很小的宽度。我没有在图表上设置宽度,以便它可以继承 100% 宽度并填充容器。只要我对浏览器做任何事情,例如打开控制台或调整浏览器大小,图表就会缩放到正确的宽度。我想知道是否有任何方法可以强制调整大小。我在使用 c3d3 之前遇到过类似的问题,但使用 chart.resize() 解决了这个问题。我不知道 nvd3 是否有类似的方法,因为我对 nvd3 的经验不多。我想知道是否有类似的方法可以使用,或者是否有 d3 的纯粹方法来做到这一点。
这里有一些之前和之后的图片来帮助形象化这个问题:
之前:
打开控制台或以任何方式调整浏览器大小后,它会正确缩放:
编辑:我应该补充一点,设置固定宽度可以绕过这个问题,但随后固有的响应能力就会消失(当图形在较小的浏览器尺寸下重叠时会出现新问题)
编辑:添加了一些我希望能有所帮助的代码片段。我以 Bootstrap 的方式使用行和列。我还在 JS
中声明图表选项HTML
<div class="row">
<div class="col-sm-6">
<nvd3 id="inlet" options="inletOptions" data="inletData"></nvd3>
</div>
<div class="col-sm-6">
<nvd3 id="outlet" options="outletOptions" data="outletData"></nvd3>
</div>
</div>
JS
$scope.inletOptions = {
chart: {
type: 'lineChart',
height: 300,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d) { return d.x; },
y: function(d) { return d.y; }
}
};
对于那些运行有类似问题的人,请参阅以下帖子:
https://github.com/krispo/angular-nvd3/issues/259
http://plnkr.co/edit/ncT72d?p=preview
$scope.triggerResizeEvent = function() {
window.dispatchEvent(new Event('resize'));
}
如果有人 运行 遇到这个问题,对我来说这实际上是一个非常简单的解决方案 没有 调整大小事件。
这是我的图表。
<div id="chart" class="row">
<div class="col-xs-12">
<svg>
</svg>
</div>
</div>
如果我没有要显示的数据,我只需使用 JavaScript:
隐藏 divfunction ShowChart(show) {
$('#chart').css("display", (show ? "block" : "none"));
}
但是当我将 "true" 传递给函数时它被压扁了。
我的解决方案是,我必须先显示 div,然后使用 .update() 作为图形。
所以,对我来说,这没有工作:
d3.select("#chart svg").datum(chart_data);
chart.update();
ShowChart(true);
这做到了:
ShowChart(true);
d3.select("#chart svg").datum(chart_data);
chart.update()