JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div ng-app="myApp" >
<div id="body"  ng-controller="testCtrl">
    cx: <input type="number" ng-model="cx"/><br/>
    cy: <input type="number" ng-model="cy"/><br/>
    R : <input type="number" ng-model="radius" />

    <draggable-circle/>
</div>
</div>

JavaScript

var angularApp = angular.module('myApp', []);

 var testCtrl = angularApp.controller('testCtrl', function ($scope) {
            $scope.cx = 100, $scope.cy = 100, $scope.radius = 50;
     });
testCtrl.directive('draggableCircle', function () {
   function link(scope, el, attr) {

    var w = 800, h = 600;
    var drag = d3.behavior.drag().origin(Object).on("drag", dragmove);
    
       var svg = d3.select(el[0]).append("svg")
                    .attr("class", "svgContainer")
                    .attr("width", w)
                    .attr("height", h);
     var newg = svg.append("g").data([{ x: scope.cx , y: scope.cy}]);

     var dragCircle = newg.append("circle")
                    .attr("r", scope.radius)
                    .attr("cx", function(d) {
                        return d.x;
                    })
                    .attr("cy", function (d) {
                        return d.y;
                    })
                    .attr("fill", "red")
                    .style("fill-opacity", 0.8)
                    .style("stroke", "steelblue")
                    .style("cursor"," pointer")
                    .call(drag);
               

     function dragmove(d) {
        var mousePosition = d3.mouse(this);
       dragCircle.attr("cx", d.x =scope.cx= mousePosition[0])
           .attr("cy", d.y=scope.cy = mousePosition[1]);
                    scope.$apply()
     }
   }
     return {
                link: link
            };

 });