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

我试图在一个svg元素中动态地创建不同类型的nvd3图表（主要是因为我想动态切换图表类型）。为此，每次更改图表类型时，我都会删除我的svg-Element的每个子项并添加新图表。NVD3在调整事件调用时将旧图表添加到svg

这一切都很好，问题来了，当我调整我的窗口，并调用chart.update通过nv.utils.windowResize。出于某种奇怪的原因，在此过程中，旧图表会再次添加到DOM中，并显示2个图表。

这里的效果图片：

下面是一个例子plunker与行为： Plunker。只需点击按钮将图表类型从一行更改为条形，并调整预览窗口的大小，就可以实现。

任何人之前有这个问题或知道任何我可以尝试解决这种行为？

非常感谢您的帮助！

2017-04-03 Michael Faisst

这可能是一个闭合的问题，其中变量图表从上次遗留下来的。你有没有尝试过nv.utils.windowResize（this.chart.update）; 如果你发布了一个完整的jsFiddle来显示这个问题，这将有所帮助。如果没有看到添加图表的其他实例，很难说明发生了什么。 – jeznag

@jeznag用plunker链接更新了我的问题！谢谢：） –

在我看来，像你声明图表的方式存在问题。让运营商使用块范围，因此您的原始代码：

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

将不起作用。图表只会在if块内定义。你可以这样做，而不是（请注意，图表宣布关闭外）：

private addGraph(): void { 

    let that = this; 
    let chart; 

    nv.addGraph(() { 

    d3.selectAll(`svg > *`).remove(); 

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

    let myData = that.testData(); 

    d3.select('#chart svg') 
     .datum(myData) 
     .call(chart); 

    //Update the chart when window resizes. 
    nv.utils.windowResize(function() { chart.update() }); 
    return chart; 
    }); 
}

https://plnkr.co/edit/pwiO8FCpGyd2JLG4hllW?p=preview

来源

2017-04-05 02:15:16 jeznag

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

回答

相关问题