AngularJS 지시문이 D3 원형 차트를 업데이트하지 않음

Question

지시문을 사용하여 walk through of how to hook up Angular and D3 together을 따라 왔고 표시 할 D3 그래프를 얻었습니다. 그러나 양식에서 데이터를 변경하면 그래프가 업데이트되지 않습니다. 왜 이런 일이 일어날 지 모릅니다. 당신이 '='를 사용하여 분리 범위에 val에 양방향 데이터 바인딩을 설정 한 다음 $ val을 보내고) (시청하고 있기 때문에

budgetApp.directive('d3Vis', function() { 

var r = 500, 
format = d3.format(",d"), 
fill = d3.scale.category20c(); 

var bubble = d3.layout.pack() 
.sort(null) 
.size([r, r]) 
.padding(1.5); 

return { 
    restrict: 'E', 
    scope: { 
    val: '=' 
}, 
link: function (scope, element, attrs) { 

    var vis = d3.select(element[0]).append("svg") 
    .attr("width", r) 
    .attr("height", r) 
    .attr("class", "bubble"); 

    scope.$watch('val', function (newVal, oldVal) { 

    // clear the elements inside of the directive 
    vis.selectAll('*').remove(); 

    // if 'val' is undefined, exit 
    if (!newVal) { 
     return; 
    } 

    var node = vis.selectAll("g.node") 
    .data(bubble.nodes(classes(newVal)) 
     .filter(function(d) { 
     return !d.children; 
     })) 
    .enter().append("g") 
    .attr("class", "node") 
    .attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 

    node.append("title") 
    .text(function(d) { 
     return d.className + ": " + format(d.value); 
    }); 

    node.append("circle") 
    .attr("r", function(d) { 
     return d.r; 
    }) 
    .style("fill", function(d) { 
     return fill(d.packageName); 
    }); 

    node.append("text") 
    .attr("text-anchor", "middle") 
    .attr("dy", ".3em") 
    .text(function(d) { 
     return d.className.substring(0, d.r/3); 
    }); 

    // Helper function, returns a flattened hierarchy containing all leaf nodes under the root. 
    function classes(root) { 
     var classes = []; 

     function recurse(name, node) { 
     if (node.children) node.children.forEach(function(child) { 
      recurse(node.name, child); 
     }); 
     else classes.push({ 
      packageName: name, 
      className: node.name, 
      value: node.size 
     }); 
     } 

     recurse(null, root); 
     return { 
     children: classes 
     }; 
    } 

    }); // end watch 
    } 
}; 
}); 

Answer 1

, 나는 양식 데이터가 제대로 지침에 전달되고 가정합니다.

따라서 (DTC 문제는) $ 시계 함수 내에서 가능하며 각도 문제는 아닙니다. (저는 Angular에만 익숙 합니다만, D3는 재미있을 것 같습니다.)

어딘가에 ng-model='val'이 있습니까?

Answer 2

안녕하세요 저는 사용중인 '템플릿'종류를 붙여 넣습니다. 데이터에 대한 감시자를 고려하십시오. 값을 비교할 필요가 있습니다. 이것은 true를 매개 변수로 설정할 때 수행됩니다.

angular.module('myDirectives', []) 
    .directive('test', ['$window', 
     function ($window) { 
      return { 
       restrict: 'E', 
       scope: { 
        data: '=', 
        /* other attributes */ 
       }, 
       replace: false, 
       template: '<div id="mydirective"></div>', 
       link: function (scope, element, attrs) { 
        var svg = d3.select(element[0]) 
         .append('svg') 
         .style('width', '100%')      
        var margin = parseInt(attrs.margin) || 20; 

        // Browser onresize event 
        $window.onresize = function() { 
         scope.$apply(); 
        }; 
        // New data 
        scope.$watch('data', function (newVals, oldVals) { 
         return scope.render(newVals); 
        }, true); 


        scope.$watch(function() { 
         return angular.element($window)[0].innerWidth; 
        }, function() { 
         scope.render(scope.data); 
        }); 

        scope.render = function (data) { 
         // custom d3 code 
         svg.selectAll('*').remove(); 
         if (!data) return; 
         var width = d3.select(element[0]).node().offsetWidth - margin, 

        } 
       } 
      }; 
     } 
    ])