IonicModal 与 AngularNVD3 的冲突（基于 D3）

Question

我在我的 Ionic 应用程序中使用 nvd3。在一种情况下，我遇到了一个问题，即我在一个选项卡上有一个饼图，在另一个选项卡上有一个 IonicModal。打开 IonicModal 后，当我进入 PieChart 选项卡时，图表变得非常小。对我来说看起来很奇怪，因为如果 IonicModal 在同一个选项卡上，并且 pieChart 是可见的，那么 Modal 不会影响 pieChart，但是如果 pieChart 被隐藏并且我打开 Modal，那么图表再次变得如此小（设计被打扰了）...

这是一张图片

这里是精简版

这是紧凑的。任何帮助将不胜感激。

Answer 1

你可以尝试在config属性中使用extended: true：

<nvd3 options="options" config="{extended: true}" data="data"></nvd3>

这是一个 Plunker：http://plnkr.co/edit/WQq6e5?p=preview

可以在 Dash 选项卡和帐户选项卡中打开 IonicModal。

如果您神奇地删除配置属性，您注意到的问题就会发生...

Answer 2

大家好，我通过在 angular nvd3 指令中将 width="100%" 更改为 width="100vw" 解决了这个问题。

喜欢这行：

scope.svg.attr('width', '100%').style({width: '100%'});

更改为：

scope.svg.attr('width', '100%').style({width: '100vw'});

我使用了以下 SO link 这可以帮助您了解 100% 和 100vw 之间的区别：

Difference between Width:100% and width:100vw?

IonicModal 与 AngularNVD3 的冲突（基于 D3）

Conflict of IonicModal with AngularNVD3 (based on D3)

javascript

d3.js

angularjs

ionic-framework

angular-nvd3