在d3.js + AngularJS中分离关注点

Question

我正在制作一个帮助学习graph theory的项目，我在使用d3.js在屏幕上绘制SVG的指令关注点分离方面遇到了问题。以下指令代码处理屏幕上的svg绘图（为简洁起见，进行了总结）。

angular.module('graphe.directives')
.directive('gpStage', function () {
    'use strict';
    return {
        templateUrl: 'scripts/directives/gpStage.html',
        restrict: 'E',
        replace: true,
        require: '^gpContainer',
        controller: 'gpStageCtrl',
        link: function postLink(scope, element, attrs, gpContainerCtrl) {                
            var selectedNode = null,
                selectedLink = null,
                nodeGroup;

            // init svg
            var outer = d3.select(element[0]).append('svg:svg') 
                // a lot of code....

            outer.append('defs').append('marker')
                // a lot of code....

            var xLines, yLines;
            var gridSize = 20;
            var gridWidth = 2000;
            var gridHeight = 2000;

            var vis = outer.append('svg:g')
                // a lot of code....
                ;

            drawGrid();

            vis.append('svg:rect')
                // a lot of code....

            // init force layout
            var force = d3.layout.force()
                .size([scope.width, scope.height])
                .nodes(scope.graph.nodeList)
                .links(scope.graph.linkList)
                .on('tick', tick);

            // get layout properties
            var nodes = force.nodes(),
                links = force.links(),
                // group all links
                link = vis.append('g').attr('id','link-group').selectAll('.link'),
                node = vis.append('g').selectAll('.node');

            redraw();

            function tick() {
               // a lot of code....
            }

            function rescale() {
                // a lot of code....
            }

            // redraw force layout
            function redraw() {
                outer
                    .attr('width' , scope.stageWidth)
                    .attr('height', scope.stageHeight);

                link = link.data(links);

                link.enter().append('line');                   
                link.exit().remove();
                node = node.data(nodes);

                nodeGroup = node.select('g')
                    .attr('id', function(d,i){ return 'node-' + i; });

                node.select('.node circle')
                    .attr('fill', function (d) { return d.color; } );

                node.select('.node text')
                    .text(function(d){ return d.label; });

                nodeGroup = node.enter()
                    .append('g')
                    .attr('id', function(d,i){ return 'node-' + i; });

                nodeGroup.attr('class', 'node').append('circle');

                node.exit().remove();                    

                function dragMove (d, i) {} // a lot of code....

                function dragStart(d,i){ } // a lot of code....

                function dragEnd(d,i){ }

                var nodeDrag = d3.behavior.drag()
                    .on('drag', dragMove)
                    .on("dragstart", dragStart)
                    .on("dragend", dragEnd);

                nodeGroup.call(nodeDrag);
                nodeGroup.on('click',mousedownnode);

                function mousedownnode(d) { }
                node.exit().remove();
                force.start();
            }

            function collide(alpha) { }

            scope.$watch('stageWidth', redraw);
            scope.$watch('stageHeight', redraw);
            scope.$watch('graph', redraw, true);
            scope.$watch('currentOption', function () {});
        }
    };
})
// For communication with other directives
.controller('gpStageCtrl',function ($scope) {        

    $scope.selectNode = selectNode;
    $scope.selectLink = selectLink;
    $scope.deselectLink = deselectLink;
    $scope.deselectNode = deselectNode;   

    function selectNode (id) { }
    function selectLink (source, target){ }
    function deselectLink (source, target){ }
    function deselectNode (id){ }
});

有没有更好的方法来分离d3.js SVG绘图的问题？

修改：The running code.