d3.js на «перетаскивании» не может быть вызван в директиве angularjs - PullRequest
0 голосов
/ 16 октября 2018

Я пытаюсь преобразовать код d3 (https://codepen.io/anon/pen/JmOqzL) в директиву angularjs, однако после преобразования его нельзя перетаскивать, кажется, что scope.dragmove не работает вообще. Я предполагаю, что проблема в чем-то неправильномwith scope.dragmove Может кто-нибудь сказать мне, что не так с моим кодом? Большое спасибо

flowApp.directive('node', function () {
    return {
        restrict: 'E',
        link : function (scope, elem, attrs) {
            scope.nodes = [];
            // Create a svg canvas
        scope.svg = d3.select("#drawArea")
        .append("svg")
        .attr("width", 700)
        .attr("height", 500);

        //Drag nodes
        scope.drag = d3.behavior.drag()
        .on("dragstart", function() {
            d3.event.sourceEvent.stopPropagation()
        })
        .on("drag", scope.dragmove);

        scope.line = scope.svg.append("line")
        .style("stroke", "black")
        .attr("x1", 150)
        .attr("y1", 100)
        .attr("x2", 250)
        .attr("y2", 300);

        //First node
        scope.g1 = scope.svg.append("g")
        .attr("transform", "translate(" + 150 + "," + 100 + ")")
        .attr("class", "first")
        .call(scope.drag)
        .append("circle").attr({
            r: 20,
        })
        .style("fill", "#F00")

        //Second node
        scope.g2 = scope.svg.append("g")
        .attr("transform", "translate(" + 250 + "," + 300 + ")")
        .attr("class", "second")
        .call(scope.drag)
        .append("circle").attr({
            r: 20,
        })
        .style("fill", "#00F");

        //Drag handler
        scope.dragmove = function () {
            scope.x = d3.event.x;
            scope.y = d3.event.y;
            d3.select(this).attr("transform", "translate(" + scope.x + "," + scope.y + ")");
            if(d3.select(this).attr("class") == "first") {
                scope.line.attr("x1", scope.x);
                scope.line.attr("y1", scope.y);
            } else {
                scope.line.attr("x2", scope.x);
                scope.line.attr("y2", scope.y);
            }
        }

        },
        templateUrl : './components/node/node.html'
    }
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...