首页 > angularjs directive + D3, scope数据更新后,重新生成可视化图后新图直接覆盖在老图之上

angularjs directive + D3, scope数据更新后,重新生成可视化图后新图直接覆盖在老图之上

加了transclude,应该把template里的内容清空的,但是每次update数据后原来的图都在,哪里写错了吗,跟有关吗?

directive

myApp.directive('sankeyChart', function($window){
    return{
        restrict:'EA',
        transclude: true, //加了transclue
        template:"<svg width='1200' height='600'></svg>",
        scope:{chartData:'=chartData'},
        link: function(scope, elem, attrs){
            scope.$watch('chartData', function(nv){
                var dataToPlot=nv;
                var d3 = $window.d3;
                、、、、下面都是d3的代码、、、、、、、

调用directive

<div sankey-chart chart-data="sankeyData" ng-if="sankeyData" class="myCharts"></div>

如下图:


擦,我发现了问题了,transclude不能擦除d3生成的svg里的内容,在写d3代码的前面手工加一个清除svg里内容的代码-搞定了。

svg.selectAll('*').remove();
【热门文章】
【热门文章】