Я пытаюсь преобразовать код 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'
}
})