Angular NVD3在调用resize事件时将旧图表添加到svg

我试图在一个svg元素中动态创建不同类型的nvd3图表（主要是因为我想动态切换图表类型）。为此，每次更改图表类型时，我都会删除svg元素的每个子元素并添加新图表

这一切都很好，当我调整窗口大小并通过

nv.utils.windowResize

调用

chart.update

时，问题就出现了。出于某种奇怪的原因，在此过程中，旧图表再次添加到DOM中，并显示两个图表

下面是效果图：

下面是一个具有以下行为的plunker示例： . 只需单击按钮，将图表类型从直线更改为条形，并调整预览窗口的大小，即可完成此操作

以前有人有过这个问题，或者知道我可以尝试解决这个问题吗

---

非常感谢您的帮助

在我看来，您声明图表的方式存在问题。let运算符使用块作用域，因此原始代码：

 if(that.useLine) {
   let chart = nv.models.lineChart();
 } else {
   let chart = nv.models.discreteBarChart();
 }

不行。图表将仅在if块中定义。您可以这样做（注意，图表是在闭包之外声明的）：

---

在我看来，您声明图表的方式存在问题。let运算符使用块作用域，因此原始代码：

 if(that.useLine) {
   let chart = nv.models.lineChart();
 } else {
   let chart = nv.models.discreteBarChart();
 }

不行。图表将仅在if块中定义。您可以这样做（注意，图表是在闭包之外声明的）：

---

我可以通过将自定义回调函数传递到

nv.utils.windowResize

方法来解决这个问题。当调整图表的大小时，因为它被删除和重建了很多次，所以看起来像是选通了，但是我想不出一个替代方法来实现这一点

    var removeChart = function(element) {
        d3.select(element).selectAll('*').remove();
        d3.selectAll('.nvtooltip').style('opacity', '0');
    };

    nv.utils.windowResize(function() {
        // chartElement is a reference to the chart's <svg> element
        removeChart(chartElement);
        chart.update();
    });

var removeChart=功能（元素）{
d3.选择（元素）.selectAll（'*'）.remove（）；
d3.选择全部（'.nvtooltip'）.style（'opacity'，'0'）；
};
nv.utils.windowResize（函数（）{
//chartElement是对图表元素的引用
removeChart（chartElement）；
chart.update（）；
});

我通过将自定义回调函数传递到

nv.utils.windowResize

方法中，解决了这个问题。当调整图表的大小时，因为它被删除和重建了很多次，所以看起来像是选通了，但是我想不出一个替代方法来实现这一点

    var removeChart = function(element) {
        d3.select(element).selectAll('*').remove();
        d3.selectAll('.nvtooltip').style('opacity', '0');
    };

    nv.utils.windowResize(function() {
        // chartElement is a reference to the chart's <svg> element
        removeChart(chartElement);
        chart.update();
    });

var removeChart=功能（元素）{
d3.选择（元素）.selectAll（'*'）.remove（）；
d3.选择全部（'.nvtooltip'）.style（'opacity'，'0'）；
};
nv.utils.windowResize（函数（）{
//chartElement是对图表元素的引用
removeChart（chartElement）；
chart.update（）；
});

如果变量图表是上次遗留下来的，则可能是一个收尾问题。您是否尝试过执行nv.utils.windowResize（this.chart.update）；如果您发布一个完整的jsFiddle来显示这个问题，这会有所帮助。如果看不到其他添加图表的实例，很难判断发生了什么。@jeznag用plunker链接更新了我的问题！谢谢：）你能解决这个问题吗？这可能是一个收尾问题，变量图是上次遗留下来的。您是否尝试过执行nv.utils.windowResize（this.chart.update）；如果您发布一个完整的jsFiddle来显示这个问题，这会有所帮助。如果看不到其他添加图表的实例，很难判断发生了什么。@jeznag用plunker链接更新了我的问题！谢谢：）你能解决这个问题吗？